1

$('#first_dropdown').change()2 つのドロップダウンがあり、発生時に 2 番目のドロップダウンで特定の要素 (クラスを持つ) を非表示/表示したい

私は同じことを試みましたが、ほとんど成功しませんでした。どうすれば同じことを達成<option>できますか?

私の試したコード:

var a = $('#first_dd').val(); //first dropdown - dd value
$('#first_dd').change(function(){
$('.a').hide();        //iv given a class to all elements of second dropdown
});
4

2 に答える 2

3

すべてのブラウザの選択ボックスからオプションを非表示にすることはできません。オプションを配列に格納し、実際にselect要素から削除する必要があります。おそらく、最初のselect要素が変更されたときに、不要なオプションを省略して、2番目のselect要素を再構築する方が簡単です。

カカロットのフィドルをベースとして、次のようにします。

デモ

これはすべてのブラウザで機能するはずです。

select1でまだ何も選択していない場合、オプションが表示されないようにフィドルを更新しました。

最終コード：

HTML

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
</select>

<select name="items" id="select2">
    <option value="0" class="1">Item 1</option>
    <option value="1" class="1">Item 2</option>
    <option value="2" class="2">Item 3</option>
    <option value="3" class="2">Item 4</option>
</select>

JS

/* Taking an array of all options-2 and save it on select1 */
$("#category").data('options',$('#select2 option').clone());
$("#select2").html("");

$("#category").change(function() { 
    var itemClass = $(this).val();
    var options = $(this).data('options').filter('.' + itemClass);
    $('#select2').html(options);
});

更新 ：追加の説明

この行：

$("#category").data('options',$('#select2 option').clone());

最初の選択ボックスを選択し、この.data方法を使用して、その選択ボックスにデータを添付します。どのデータ？ボックス2を選択するすべてのオプションに含まれています。どのように？すべてのオプションを選択することにより、ボックス2に含まれるものを選択し、それらを複製します（コピーします）。

このコレクションを何度も使用できるため、そのオプションのセットが保存されます。選択ボックス1から選択した値を使用してコレクションをフィルタリングし、残りのオプションを選択ボックス2のコンテンツとして設定して、以前にあったオプションを置き換えます。それはこの行で起こります：

var options = $(this).data('options').filter('.' + itemClass);

したがって、オプションを非表示にする必要はありません。毎回、使用可能なすべてのオプションのフィルターされたセットに置き換えます。

于 2012-09-17T13:02:02.583 に答える
3

したがって、最初のドロップダウンメニューの変更に従って、2番目のドロップダウンメニューを変更しようとしています。

このフィドルはあなたを助けることができます：

jsフィドル

于 2012-09-17T13:03:27.777 に答える