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

Question

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

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

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

enter code here

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

但是这个例子显示了一个“--所有--”选项，显示所有组在一起，我需要做一些事情就像

下拉菜单 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>

编辑如评论中所述，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');
});