web-dev-qa-db-ja.com

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

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

私はここで素晴らしいスクリプトを見つけました：

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

enter code here

この投稿から： Jquery最初のドロップダウン表示に応じて/ 2番目のドロップダウンを並べ替えますか？

ただし、この例では、すべてのグループをまとめて表示する「-All-」オプションを示しています。

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

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

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

（アジアを選択した場合）中国
日本

私が取得しようとしているのは、そのjsfiddleに表示されているものと同じですが、[すべて（グループ）を表示]オプションを一緒に表示したくありません。

更新：何度も試した後、Catalin Bertaが彼のWebサイトに投稿したソリューションを使用することになりました： http://devingredients.com/ 2011/05/populate-a-select-dropdown-list-with-jquery /

そのURLからの最終結果は次のようになります： http://jsfiddle.net/c510xdrj/

このソリューションは、すべての主要なブラウザーで機能します。

助けてくれたShlomiHassidに感謝します。

javascriptjqueryhtmldrop-down-menu
7
CVB_CL

問題がどこにあるのかわかりません。すべてのものに対応する部分をドロップするだけで完了です。

見てください： 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 [〜＃〜]コメントに記載されているように、このメソッドはsafariではサポートされていません。これは、最新のブラウザで動作するはずの2番目のソリューションです。

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