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

Question

我试图根据第一次下拉选择获得第二次下拉.

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

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

enter code here

从这篇文章: Jquery根据第一个下拉显示/排序第二个下拉列表？

然而,这个例子显示了一个" - 全 - "选项,显示所有组在一起,我需要做一些事情

下拉
美洲
欧洲
亚洲

下拉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');
});