jQueryUI：Select 下拉菜单在选项卡布局中显示不正确

Question

在这个例子中，我尝试创建一个选项卡布局，其中每个选项卡都包含一个下拉列表。我必须这样做，因为选项卡之间会有导航，并且最初只启用第一个选项卡。

很遗憾，下拉列表无法在之前禁用的选项卡上正确显示。而不是全尺寸的下拉列表，只能看到其中的一小部分（下图）。如何让它以全尺寸显示？

代码示例由 HTML+JS 组成，我使用的是 jQueryUI 框架。

HTML:

<div id="tabs">
    <ul>
        <li class="ui-tabs-nav"><a href="#tabs-1">TAB 1</a></li>
        <li class="ui-tabs-nav"><a href="#tabs-2">TAB 2</a></li>
        <li class="ui-tabs-nav"><a href="#tabs-3">TAB 3</a></li>
    </ul>
    <div id="tabs-1">
        <select name="select1" id="select1">
            <option disabled selected> -- select -- </option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
    <div id="tabs-2">
        <select name="select2" id="select2">
            <option disabled selected> -- select -- </option>
            <option>Option A</option>
            <option>Option B</option>
        </select>
    </div>
    <div id="tabs-3">
        <select name="select3" id="select3">
            <option disabled selected> -- select -- </option>
            <option>Option I</option>
            <option>Option II</option>
        </select>
    </div>
</div>
<input id="previous" type="submit" value="<< Previous">
<input id="next" type="submit" value="Next >>">

JS:

var $tabs = $('#tabs');
$tabs.tabs({ disabled: [1, 2] });
$("#select1").selectmenu();
$("#select2").selectmenu();
$("#select3").selectmenu();
$("#previous").button();
$("#next").button();

var minTabs=0;
var maxTabs=3;
var currentTab=0;
var activeTab=0;

function previous() {
    if (currentTab==minTabs) {
      return;
    }
    currentTab--;
    $('#tabs').tabs("option", "active",currentTab);
  }

function next() {
    if (currentTab==maxTabs) {
      return;
    }
    if ($('#select'+(currentTab+1)).val() === null) {
        alert("A selection must be made!");
        return;
    }
    currentTab++;
    if (currentTab > activeTab) {
      activeTab = currentTab;
    }
    $('#tabs').tabs('enable',currentTab).tabs("option", "active",currentTab);
}

$("#previous").bind('click', previous);
$("#next").bind('click', next);

Answer 1

事实上，调用 jquery 标签会隐藏 tab2 和 tab3，jquery 将无法将 selectmenu() 应用到相应的 select 标签。因此，您需要在启用 jquery 选项卡之前添加它。

 var $tabs = $('#tabs');

$("#select1").selectmenu();
$("#select2").selectmenu(); // moved before calling $.tabs
$("#select3").selectmenu(); // moved before calling $.tabs
$tabs.tabs({ disabled: [1, 2] });
$("#previous").button();
$("#next").button();

var minTabs=0;
var maxTabs=3;
var currentTab=0;
var activeTab=0;

function previous() {
    if (currentTab==minTabs) {
      return;
    }
    currentTab--;
    $('#tabs').tabs("option", "active",currentTab);
  }

function next() {
    if (currentTab==maxTabs) {
      return;
    }
    currentTab++;
    if (currentTab > activeTab) {
      activeTab = currentTab;    
    }
    $('#tabs').tabs('enable',currentTab).tabs("option", "active",currentTab);
}


$("#previous").bind('click', previous);
$("#next").bind('click', next);

https://jsfiddle.net/fthjhfe8/2/

jQueryUI：Select 下拉菜单在选项卡布局中显示不正确

jQueryUI: Select dropdown not displaying correctly in tab layout

javascript

jquery

tabs

jquery-ui

drop-down-menu