jQueryUI：選擇下拉菜單中不能正確顯示

Question

在這個例子中，我試圖創建一個選項卡布局，其中每個選項卡將包含一個下拉列表。我必須這樣做，因爲在選項卡之間將會有導航，並且最初只啓用第一個選項卡。

不幸的是，在之前禁用的選項卡上，下拉列表無法正確顯示。而不是一個完整的下拉列表，只能看到它的一小部分（見下圖）。如何使其以全尺寸顯示？

代碼示例包含HTML + JS和我正在使用jQueryUI框架。

https://jsfiddle.net/fthjhfe8/3/

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()應用到對應的選擇標籤。所以你需要添加它，然後啓用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/