jquery - jQuery selectmenu不显示选项

我的页面上有一个简单的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中）

最佳答案

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

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

关于jquery - jQuery selectmenu不显示选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48058932/