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

Question

我想根据第一个下拉选择获取第二个下拉选项。

我发现这里有很大的脚本：

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

enter code here 

从这个帖子： Jquery Depending on the first Dropdown display/sort a second dropdown?

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

下拉A
美国
欧洲
亚洲

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

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

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

我想要得到的是对的jsfiddle显示的一样，但我不希望有一个“显示所有（团体）“一起选项。

更新： 多次尝试后，我结束了使用发表克特林贝尔塔在他的网站解决方案：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'); 
});