0

別の選択フィールドで選択したものに基づいてオプションを表示するセレクターを作成しようとしています。次のようになります。

           <select name="field2" id="field2" required="required">
                <option id="field2-1" value="os1">
                     os1
                </option>
                <option id="field2-2" value="os2">
                     os2
                </option>
                <option id="field2-3" value="os3">
                     os3
                </option>
           </select>

次に、これらのオプションを備えた2番目のセレクターがあります。

           <select name="field3" id="field3" required="required">
                <option id="field3-1" value="dl1">
                     dl1
                </option>
                <option id="field3-2" value="dl2">
                     dl2
                </option>
           </select>

基本的に、私が行う必要があるのはこれです。最初のセレクターでos1が選択されている場合、2番目のセレクターでdl1とdl2の両方が使用可能になります。

最初のセレクターでos2またはos3が選択されている場合、dl1は非表示になり、2番目のセレクターにはdl2のみが表示されます。

私はこれに対する確実な解決策を見つけることができないようですが、私はjsが得意ではないので、うまくいけば、あなたの1人が私を正しい方向に向けることができます。

ありがとう ：）

4

3 に答える 3

1

Vanilla JSソリューション（jQueryは不要）-デモ

var selectOne = document.getElementById("field2");

selectOne.addEventListener("change", function() {
    if (this.options[this.selectedIndex].value == 'os2' || this.options[this.selectedIndex].value == 'os3') {
        document.getElementById('field3-2').style.display = "none";
    } else {
        document.getElementById('field3-2').style.display = "block";
    }
}, false);
于 2012-08-16T19:57:42.933 に答える
0

これを試みる方法はいくつかありますが、おそらく最も簡単な方法の1つは、非表示の2つの「テンプレート」SELECT要素を用意し、これらの非表示のSELECT要素から＃field3SELECT要素にhtmlをコピーすることです。この例では、jQueryを使用していないと想定します。

例えば：

<SELECT id="template_1">
            <option id="field3-1" value="dl1">
                 dl1
            </option>
            <option id="field3-2" value="dl2">
                 dl2
            </option>
</SELECT>
<SELECT id="template_2">
            <option id="field3-1" value="dl1">
                 dl1
            </option>
            <option id="field3-2" value="dl2">
                 dl2
            </option>
</SELECT>

次に、JavaScriptは次のようになります。

var field2 = document.getElementById('field2');
var field3 = document.getElementById('field3');
var template1 = document.getElementById('template_1');
var template2 = document.getElementById('template_2');
var os = field2.options[field2.selectedIndex];
if (os == 'os1') {
    field3.innerHTML = template1.innerHTML;
}
else {
    field3.innerHTML = template2.innerHTML;
}
于 2012-08-16T19:51:49.770 に答える
0

jquery編集：申し訳ありませんが、タグの欠如に気づいていませんでした。jQueryを使用したい場合は、以下のコードが機能します。

$('#field2').change(function(){
    if($(this).val() === 'os2' || $(this).val() === 'os3'){
        $('#field3-1').hide();
    }
    else{
        $('#field3-1').show();
    }
});
于 2012-08-16T19:51:51.290 に答える