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

【问题标题】：Show input field only if a specific option is selected仅在选择特定选项时显示输入字段
【发布时间】：2015-03-28 19:20:07
【问题描述】：

我正在尝试制作一个表单来检查是否从“选择”标签中选择了某个选项。这是我当前的 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>

但它不起作用......

【问题讨论】：

解决了！在 if 函数中，我在那里有“.checked”，但应该是“.selected”

标签： javascript html forms html-select

【解决方案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>

【讨论】：

【解决方案2】：

查看：Display div if a specific select option value is selected

也不要使用 ID 使用数据属性或值来检查比较。

【讨论】：

ID 应该是唯一的，getElementByID 只返回一个
您也可以为此使用类，但我认为数据属性或使用值更好。使用 jQuery，您的代码将类似于 demo

【解决方案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>

【讨论】：

您好，欢迎来到 Stack Overflow！请拨打tour。感谢您提供答案，但您能否添加关于您的代码如何解决问题的说明？

【解决方案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>

【讨论】：

欢迎来到 Stack Overflow！仅代码的答案并不是特别有用。请添加一些关于此代码如何解决问题的描述。