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，这可能会覆盖selectmenu

我不知道为什么值没有显示（即使它们在页面上的HTML中）

Answer 1

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

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