web-dev-qa-db-ja.com

特定のオプションが選択されている場合にのみ入力フィールドを表示する

特定のオプションが「select」タグから選択されているかどうかをチェックするフォームを作成しようとしています。現在のHTMLは次のとおりです。

<select onchange="yesnoCheck()">
    <option id="noCheck" value="">Valitse automerkkisi</option>
    <option id="noCheck" value="lada">Lada</option>
    <option id="noCheck" value="mosse">Mosse</option>
    <option id="noCheck" value="volga">Volga</option>
    <option id="noCheck" value="vartburg">Vartburg</option>
    <option id="yesCheck" value="other">Muu</option>
</select>

これは、「Muu」が選択された後に表示されるdiv要素です。

<div id="ifYes" style="display: none;">
    <label for="car">Muu, mikä?</label> <input type="text" id="car" name="car" /><br />
</div>

そして、私が使用しようとしているJavaScriptは次のとおりです。

<script type="text/javascript">
    function yesnoCheck() {
        if (document.getElementById("yesCheck").checked) {
            document.getElementById("ifYes").style.display = "block";
        } else {
            document.getElementById("ifYes").style.display = "none";
        }
    }
</script>

しかし、それは機能していません...

javascripthtmlformshtml-select
14
user1589375

どうぞ：

function yesnoCheck(that) {
    if (that.value == "other") {
  alert("check");
        document.getElementById("ifYes").style.display = "block";
    } else {
        document.getElementById("ifYes").style.display = "none";
    }
}
<select onchange="yesnoCheck(this);">
    <option value="">Valitse automerkkisi</option>
    <option value="lada">Lada</option>
    <option value="mosse">Mosse</option>
    <option value="volga">Volga</option>
    <option value="vartburg">Vartburg</option>
    <option value="other">Muu</option>
</select>

<div id="ifYes" style="display: none;">
    <label for="car">Muu, mikä?</label> <input type="text" id="car" name="car" /><br />
</div>
35
Josephus87

チェックアウト： 特定の選択オプション値が選択されている場合はdivを表示

また、IDを使用しないで、データ属性または値を使用して比較を確認してください。

1
Mike