jQuery: selectボックスを連動させる

jQueryを使って、２つのセレクトボックスを連動させてみました。 ご自由にアレンジしてお使いください。

実際の動作は下のサンプルで確認できます。

セレクトボックス連動サンプル

★ 特徴

  • 左側のセレクトボックスを変更した時に、 右側のセレクトボックスの一番上には「コードを選択してください」が表示されるようにしています。
  • 左側で「全てのコード」を選択すると、右側には全てが表示されます。

★ コードを使用する場合

左側のセレクトボックスのvalue値と、 右側のセレクトボックスのclass名を連動させてください。

HTML


<p>
<!--  左側  -->
<select id="first">
    <option value="first0" selected>全てのコード</option>
    <option value="first1">1で始まるコード</option>
    <option value="first2">2で始まるコード</option>
    <option value="first3">3で始まるコード</option>
</select>

<!--  右側  -->
<select id="second">
    <option value="0000" selected>コードを選択してください</option>
    <option value="1332" class="first1">1332</option>
    <option value="1605" class="first1">1605</option>
    <option value="1801" class="first1">1801</option>
    <option value="2002" class="first2">2002</option>
    <option value="2803" class="first2">2803</option>
    <option value="3845" class="first3">3845</option>
    <option value="3902" class="first3">3902</option>
</select>
</p>

jQuery


$(document).ready(function(){

    // selectbox コード選択左側
    $("#first").on("change", change_select1);

});

// selectbox コード選択左側
function change_select1(){
    var value = $("#first option:selected").attr("value");
    //console.log(value);
    
    //  #second option の要素数を取得
    var count = $("#second option").length;
    //console.log(count);
    for (var i=1; i<count; i++) {
        
        // #second option要素
        var opt = $("#second option").eq(i);
        var cls = opt.attr("class");
        //console.log(i + ": " + cls);
        
        if (value == cls){
            //console.log(i + ": " + value);
            opt.show();
        }else if (value == "first0"){
            opt.show();
        }else{
            opt.hide();
        }

    }
    // value 指定
    $("#second").val("0000");
}
jQuery入門