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

Question

我正在尝试根据首次下拉选择获得第二次下拉。

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

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

enter code here

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

然而，这个例子显示了一个＆＃34; - 全部 - ＆＃34;选项显示所有组在一起，我需要做一些像

下拉A 美国
欧洲
亚

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

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

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

我试图获得的内容与jsfiddle上显示的内容相同，但我不想要显示所有（群组）＆＃34;一起选择。

更新 经过多次尝试，我最终使用了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>

修改 正如评论中所提到的，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');
});