使第二个选择菜单依赖于 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，第二个选择选项有一个属性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();
   });
});