javascript - 使第二个选择菜单依赖于 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();
   });
});