根据第一个下拉选择 jquery 显示第二个下拉选项

Question

我正在尝试根据第一个下拉选择获得第二个下拉列表。

我在这里找到了一个很棒的脚本：

http://jsfiddle.net/heera/Gyaue/

enter code here

来自这篇文章： Jquery Depending on the first Dropdown display/sort a second dropdown?

但是，此示例显示了一个“--All--”选项，将所有组显示在一起，我需要执行类似的操作

下拉A
美国
欧洲
亚洲

下拉B
（如果选择美国）
阿根廷
巴西
智利

（如果选择了欧洲）
意大利
法国
西班牙

（如果选择了亚洲） 中国
日本

我想要得到的是在那个 jsfiddle 上显示的相同，但我不想有一个“显示所有（组）”选项。

更新： 经过多次尝试，我最终使用了 Catalin Berta 在他的网站上发布的解决方案：http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

该 URL 的最终结果如下所示： http://jsfiddle.net/c510xdrj/

此解决方案适用于所有主流浏览器。

感谢 Shlomi Hassid 的帮助。

Answer 1

我看不出问题出在哪里，只需删除与所有内容相对应的部分即可。

看一看：JSnippet Demo

jQuery:

$(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    $('#groups').trigger('change');
});

HTML：

<select id="groups">
    <option value='America'>America</option>
    <option value='Europe'>Europe</option>
    <option value='Asia'>Asia</option>
<select>

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

编辑 如 cmets 中所述，safari 不支持此方法。这是第二个解决方案，应该适用于任何现代浏览器：

JSnippet DEMO

jQuery:

    $(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
              if ($(this).parent('span').length) {
                $(this).unwrap();
              }
            } else {
              if (!$(this).parent('span').length) {
                $(this).wrap( "<span>" ).parent().hide();
              }
            }
        });
    });
    $('#groups').trigger('change');
});