最初のドロップダウン選択に基づいて2番目のドロップダウンオプションを表示jquery

Question

最初のドロップダウン選択に基づいて2番目のドロップダウンを取得しようとしています。

私はここで偉大なスクリプトが見つかりました：この記事から

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

enter code here 

を： Jquery Depending on the first Dropdown display/sort a second dropdown?

しかし、この例が示す " - すべて - " すべてのグループを示すオプションを一緒に、私はちょうどのように何かをする必要があります

ドロップダウンA
アメリカ
ヨーロッパ
アジア

ドロップダウンB
（アメリカが選択されている場合）
アルゼンチン
ブラジル
チリ

（ヨーロッパが選択されている場合）
イタリア
フランス
スペイン

（アジアが選択されている場合） 中国
日本

私は何を取得しようとしていることはそのjsfiddleに示したものと同じであるが、私は（すべての」ショーを持っている必要はありませんグループ）」オプションを選択します。

アップデート：私はで彼のウェブサイト上カタリンベルタによって投稿ソリューションを使用して終了し、多くの試行の後 ： http://jsfiddle.net/c510xdrj/

この：http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

そのURLから最終的な結果は、このようなものですソリューションはすべての主要なブラウザで動作します。

あなたの助けに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> 

EDIT この方法は、サファリでサポートされていないコメントで述べたように。ここでは現代の任意のブラウザ上で動作するはず第二の溶液である：

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