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：选择下拉列表在选项卡布局中无法正确显示

1 个答案: