私は、次の選択メニューを持っているのjQuery UI Slectmenuにおける第一選択メニューに依存して第二選択メニュー

Question

を作る：あなたは2つの選択メニューがあります見ることができる、と私は彼らがそれぞれに依存するようにしたいと

<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> 

をその他、私はこれがデフォルトのHTMLでどのように動作するかをデモしてHEREを選択します。 これをjQueryUIでやりたいのですが、どうやってこれを行うのかは分かりません。

最初の選択メニューが値属性などAmericaをデータ属性を持っており、第2の選択オプションがattibute data-groupを持って、私はAmericaの値を持つ最初の選択メニューでオプションを選択すると、今、私は唯一のoptionsをしたいです2番目の選択メニューで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); 
     } 
    }); 

しかし、たとえ上記のコードではありませんワーキング。私はまだ2番目の選択ボックスが最初の選択ボックスから選択された値に依存する部分をコーディングする必要があります。誰かが私を導くことができますか？

デモリンク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(); 
    }); 
});