Javascript 使第二个选择菜单依赖于jQuery UI中的第一个选择菜单

我有以下选择菜单：

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

但即使是上面的代码也不起作用。我还没有对第二个选择框依赖于从第一个选择框中选择的值的部分进行编码，我不确定应该如何进行编码？有人能给我引路吗

---

您可以看到演示链接。

请尝试此链接，它可能会帮助您：

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

---

这是一个jqueryui问题！

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