Question

我试图制作一个表单，检查是否从＆＃34;中选择了某个选项＆＃34;标签。这是我目前的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>

这是div元素，它应该在＆＃34; Muu＆＃34;之后变得可见。被选中：

<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

你去：

＆＃13;

function yesnoCheck(that) {
    if (that.value == "other") {
  alert("check");
        document.getElementById("ifYes").style.display = "block";
    } else {
        document.getElementById("ifYes").style.display = "none";
    }
}

＆＃13;

<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>

＆＃13;

Answer 2

退房：Display div if a specific select option value is selected

另外，请勿使用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>

仅在选择特定选项时显示输入字段

4 个答案: