Javascript 基于第一个下拉选择jquery显示第二个下拉选项

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

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

从本帖：

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

下拉列表A
美国
欧洲
亚洲

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

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

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

我试图得到的是JSFIDLE上显示的相同内容，但我不希望有一个“一起显示所有（组）”选项

更新： 经过多次尝试，我最终使用了Catalin Berta在其网站上发布的解决方案：

该URL的最终结果如下所示：

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

---

感谢Shlomi Hassid的帮助。

我看不出问题出在哪里，只要去掉与所有内容对应的部分，你就完成了

看一看:

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

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

HTML:

美国
欧洲
亚洲
--挑选--
阿根廷
巴西
智利
意大利
法国
西班牙
中国
日本

编辑 如注释中所述，safari不支持此方法。第二种解决方案适用于任何现代浏览器：

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

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

$（函数（）{
$（'#groups'）。关于（'change'，function（））{
var val=$（this.val（）；
var sub=$（“#sub#u组”）；
$（'option'，sub）.filter（函数（）{
如果(
$（this.attr（'data-group'）==val
||$（this.attr（'data-group'）=='SHOW'
) {
if（$（this.parent（'span'）.length）{
$（this.unwrap（）；
}
}否则{
if（！$（this.parent（'span'）.length）{
$（this.wrap（“”.parent（）.hide（）；
}
}
});
});
$（“#组”）.trigger（'change'）；
});

请分享您“似乎不太正确”的代码。您的意思是显示还是更改？正是我想要的！非常感谢，星期五快乐！您好，很抱歉重新打开此线程，该脚本在Internet Explorer和Safari上不起作用。你有什么建议让它与这两个（重要的）浏览器一起工作吗？非常感谢。你是对的-我甚至不认为这是不支持这两个。。。添加了第二个解决方案-肮脏但很好的supportedIt工作得很好！非常感谢。为什么这个修改是“肮脏的”？请你详细说明一下（如果你有时间的话）。谢谢。它的作用是将

选项

ele包装为

span

，导致web浏览器HTML解析器在选择框后抛出span，从而导致其无效。你看不到它，因为span是隐藏的——它肮脏但专业，在“其他人”开始支持所有HTML规范之前，你可以随意使用它：）