根據第一個下拉選擇顯示第二個下拉選項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'); 
});