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

现在默认情况下，data-attribute不会从HTML select复制到jQueryUI select菜单，所以我尝试使用下面的代码来执行相同的操作：

$.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();
   });
});

根据jQuery UI Slectmenu

1 个答案: