僅在選擇特定選項時才顯示輸入字段

Question

我正在嘗試制作一個表單，用於檢查是否從“選擇”標簽中選擇了某個選項。 這是我當前的 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>

但它不起作用...

Answer 1

干得好：

 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>

Answer 2

簽出： 如果選擇了特定的選擇選項值，則顯示 div

也不要使用 ID 使用數據屬性或值來檢查比較。

Answer 3

  
 
  
  
  
 
   
 
    
    function yesnoCheck(that) {
        if (that.value == "other") {
            document.getElementById("ifYes").style.display = "block";
        }elseif (that.value == "lada") {
            
} 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>
 
   
 
  

Answer 4

 function yesnoCheck(that) { if (that.value == "aadhar") { document.getElementById("adc").style.display = "block"; } else { document.getElementById("adc").style.display = "none"; } if (that.value == "pan") { document.getElementById("pc").style.display = "block"; } else { document.getElementById("pc").style.display = "none"; } if (that.value == "pass") { document.getElementById("ps").style.display = "block"; } else { document.getElementById("ps").style.display = "none"; } }

 <div> <select id="selector" onchange="yesnoCheck(this);"> <option value="select">__Select__</option> <option value="aadhar">Aadhaar Card</option> <option value="pan">Pan Card</option> <option value="pass">Passport</option> </select> <label for="selector">Select ID Proof</label> </div> <div id="adc" style="display: none;"> <label for="aadhar">Enter Aadhar Card No.</label> <input type="text" id="aadhar" name="aadhar" /><br /> </div> <div id="pc" style="display: none;"> <label for="pan">Enter Pan Card No.</label> <input type="text" id="pan" name="pan" /><br /> </div> <div id="ps" style="display: none;"> <label for="pass">Enter Passport No.</label> <input type="text" id="pass" name="pass" /><br /> </div>