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

Show second dropdown options based on first dropdown selection jquery

提问by CVB_CL

I am trying to get a second dropdown based on first dropdown selection.

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

I found a great script here:

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

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

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

enter code here

From this post: Jquery Depending on the first Dropdown display/sort a second dropdown?

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

However this example shows a "-- All --" option showing all the groups together and I need to do something just like

但是，此示例显示了一个“-- All --”选项，将所有组显示在一起，我需要做一些类似的事情

Dropdown A
America
Europe
Asia

下拉 A
美国
欧洲
亚洲

Dropdown B
(if America is selected)
Argentina
Brazil
Chile

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

(if Europe is selected)
Italy
France
Spain

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

(if Asia is selected) China
Japan

（如果选择亚洲） CN
日本

What I'm trying to get is the same shown on that jsfiddle but I don't want to have a "Show all (groups)" together option.

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

Update:After many tries I ended up using the solution posted by Catalin Berta on his website at: http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

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

The final result from that URL is something like this: http://jsfiddle.net/c510xdrj/

该 URL 的最终结果是这样的：http: //jsfiddle.net/c510xdrj/

This solution works on all major browsers.

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

Thanks to Shlomi Hassid for your help.

感谢 Shlomi Hassid 的帮助。

回答by Shlomi Hassid

I don't see where the problem is just drop the part that correspond to the all stuff and you are done.

我不知道问题出在哪里，只需删除与所有内容相对应的部分，您就完成了。

Take a look: JSnippet Demo

看一看：JSnippet Demo

jQuery:

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:

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>

EDITAs mentioned in the comments this method is not supported by safari. here is a second solution that should work on any modern browser:

编辑如评论中所述，Safari 不支持此方法。这是适用于任何现代浏览器的第二种解决方案：

JSnippet DEMO

JSnippet 演示

jQuery:

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