使第二選擇菜單依賴性的jQuery UI Slectmenu第一選擇菜單上

Question

我有以下選擇菜單：

<form action="/search-our-collection" class="search-form" id="search-form" method="post"> 
    <div class="field-items"> 
    <div class="field-item"> 
     <label class="label">Make</label> 
     <select name="make" id="make"> 
     <option value="America">America</option> 
     <option value="Europe">Europe</option> 
     <option value="Asia">Asia</option> 
     </select> 
    </div> 
    <div class="field-item"> 
     <label class="label"> Model </label> 
     <select id="sub_groups"> 
     <option data-group="SHOW" value="0">-- Select --</option> 
     <option data-group="America" value="Argentina">Argentina</option> 
     <option data-group="America" value="Brazil">Brazil</option> 
     <option data-group="America" value="Chile">Chile</option> 
     <option data-group="Europe" value="Italy">Italy</option> 
     <option data-group="Europe" value="France">France</option> 
     <option data-group="Europe" value="Spain">Spain</option> 
     <option data-group="Asia" value="China">China</option> 
     <option data-group="Asia" value="Japan">Japan</option> 
     </select> 
    </div> 
    </div> 
</form> 

正如你可以看到有2個選擇菜單，我想他們是依賴於每個其他，我有一個演示如何在默認的HTML選擇HERE。 現在我想在jQueryUI中做到這一點，我不知道如何做到這一點。

的第一選擇菜單中有一個數據屬性具有價值屬性，如America和第二選擇選項有attibute data-group，現在，當我選擇與America值的第一選擇菜單中的選項，我只希望options在第二個選擇菜單中，data-group="America"可見。

現在，在默認情況下，該數據屬性不是從HTML複製選擇jQueryUI的選擇菜單，所以我嘗試下面的代碼做相同的：

$.widget("ui.selectmenu", $.ui.selectmenu, { 
     _renderItem: function(ul, item) { 
     return $('<li>') 
      .attr({ 
       'data-value': item.value , 
       'data-group':$(item.element).data('group') 
      }) 
      .append(item.label) 
      .appendTo(ul); 
     } 
    }); 

但是，即使上面的代碼是不加工。我還沒有編碼第二個選擇框依賴於從第一個選擇框中選擇的值的部分，我不知道該如何去做這件事？有人可以請指導我。您可以看到演示鏈接HERE。

Answer 1

請試試這個，它可以幫助你：

$(function(){ 
    $(document).on('change',"select[name='make']",function(){ 
     var selectedValue = $(this).val(); 
     $('select#sub_groups > option').show(); 
     $('select#sub_groups > option:not([data-group="'+selectedValue+'"])').hide(); 
    }); 
});