jQuery selectmenu 不显示选项

Question

我有一个简单的 select我页面上的元素

<fieldset>
   <label for="speed">Select example</label>
   <select name="miktest_select" id="miktest_select">
      <option data-field-set="" disabled selected>Please select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
   </select>
</fieldset>

然后我使用 jQuery 做了一个简单的 $('#miktest_select').selectmenu();

脚本按预期在我的页面底部创建了 div 元素

<div class="ui-selectmenu-menu ui-front ui-selectmenu-open" style="top: 268px; left: 539.828px;">
    <ul aria-hidden="false" aria-labelledby="CalculationName-button" id="CalculationName-menu" class="ui-menu ui-widget ui-widget-content ui-corner-bottom" role="listbox" tabindex="0" aria-activedescendant="ui-id-2" aria-disabled="false" style="width: 397px;">
    <li class="ui-state-disabled ui-menu-item" id="ui-id-1" tabindex="-1" role="option" aria-disabled="true">Please select</li>
    <li class="ui-menu-item ui-state-focus" id="ui-id-2" tabindex="-1" role="option">Leaving Service Quote</li>
    <li class="ui-menu-item" id="ui-id-3" tabindex="-1" role="option">Retirement Quote</li>
    </ul>
</div>

然后单击我的选择将 div 的类修改为 ui-selectmenu-open 但是<ul>和 <li>元素未显示

在 Chrome Developer 中查看元素时，我看不到任何隐藏它们的东西。

我的网站使用 bundleConfig 插件，我按以下顺序加载我的 JS 和 CSS 文件

"Scripts/vendor/jquery-ui.min.js",
"Scripts/vendor/jquery.ui.selectmenu.js",

"Content/jquery-ui.min.css",
"Content/jquery-ui-selectmenu.css",

我加载的顺序有误吗？我的网站也使用 Bootstrap，这会不会覆盖选择菜单

我不知道为什么没有显示这些值(即使它们在页面的 HTML 中)

Answer 1

.ui-front 类的 z-index 属性被 jquery-ui-selectmenu.css 设置为 100

我的页面有另一个 position:absolute div，它以更高的 z-index 值覆盖了整个页面，因此堆叠在 selectmenu div 的顶部