javascript - 为什么 jquery UI 不能正确呈现选择框

Question

我有一个简单的选择框:

<select id="targetDept" name="targetDept" class="ui-select" onclick="clearApprovers()">
<option value="1">blah</option>
<option value="2">blah2</option>
<option value="3">blah3</option>
<option value="4">blah4</option>
</select>

我试着把它变成一个花哨的 jquery 选择框:

$(document).ready(function () {

    $(".ui-select").selectmenu();
    $(".ui-button").button();

});

这是我的包括:

<link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.theme.css">
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.11.4/jquery-ui.js"></script>

它有效，但它使选择成为最丑陋的东西。不幸的是，由于公司的计算机政策，我无法上传图片，所以我会尝试描述它。

下拉框本身本质上是一个按钮，左右填充为 0(即文本触及“按钮”的边框)。当我点击下拉菜单时，它会打开一个超宽的跨度，大约是我实际页面宽度的 3 倍，并在底部创建一个滚动条。每个选项都在一个黑色的大圆点旁边，单击一个选项不会选择它，使选项保持打开状态并且不会真正执行任何操作...

我知道这不容易诊断，但在此先感谢您。

Answer 1

听起来您缺少 jquery-ui 核心 css 文件。如果您从 Jquery 主页下载 zip 文件，它位于名为 jquery-ui.css 的根文件夹中。

主题文件仅提供颜色 - 而不是使其正常运行所需的基本样式。