2

私は2つの選択メニューを持っています。1 つは #c1 という名前で、もう 1 つは #c2 という名前です。#c2 は非表示で、c1 のオプション (任意のオプション) が選択されたときに表示されます。これは問題なく動作しますが、Javascript/jQuery の知識が限られているため、理解できないように見える小さな調整が必要です。

#c1 のオプション "meta" が選択されている場合、他のオプションと同様に #c2 を表示したいのですが、#c2 には追加のオプションが必要です。

例えば

<select id="c1">
<option>Option 1</option>
<option>Option 2, etc.</option>
<option>Metadata</option>
</select>

<select id="c2">
<option>Option 1</option>
<option>Option 2, etc.</option>
<option>Metadata</option> // This should be shown only when "metadata" in #c1 is selected and hidden when not.
</select>

私が遭遇した問題は、CSS だけを使用してオプションを非表示にするのが難しく、JS の知識が限られていることです。解決策はここにありますが、それを必要な連鎖選択に成形することはできません。

ここでFiddleを作成したので、すべての選択ボックスと現在の JS を確認できます。

4

1 に答える 1

0

それが最善の方法かどうかはわかりませんが、うまくいくと思います：

var optionsArray = [{'key':'1','value':'val1','text':'Option 1'},
           {'key':'2','value':'val2','text':'Option 2, etc.'},
           ]; // Array of the #2 Options without the metadata


$('select[name="c1"]').change( function() {

    // Put your show/hide code here

    $('select[name="c2"] option').remove();// remove all the c2 options (In case there is already metadata)
    $.each(optionsArray, function(i){ //add all the basic options
          $('select[name="c2"]').append($("<option></option>")
            .attr("value",optionsArray[i]['value'])
              .text(optionsArray[i]['text']));
    });

    var valSelect1 = $(this).val();
    if (valSelect1 == 'Metadata'){ // add metadata only if the c1 option is metadata
         $('select[name="c2"]').append('<option value="Metadata">Metadata</option>');
    }
});

それが役立つことを願っています

于 2013-01-10T07:02:39.277 に答える