Javascript jQuery在选择选项时显示文本框

我有以下代码：

<select>
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" />

类型1
类型2
类型3
其他

我要做的是使用jQuery使下面的文本框在默认情况下隐藏，然后在用户从下拉列表中选择其他选项时显示它。

<select id="sel">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" style="display: none;" />

$('#sel').change(function() {
    $('#other').css('display', ($(this).val() == 'Other') ? 'block' : 'none');
});

类型1
类型2
类型3
其他
$（'#sel'）.change（function（）{
$（'#other'）.css（$（display'），（$（this.val（）='other'）？'block'：'none'）；
});

试试这个：

<select id="selectbox_id">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" />

---

这里不需要任何css

$('#sel').change(function() {
    var selected = $(this).val();
    if(selected == 'Other'){
      $('#other').show();
    }
    else{
      $('#other').hide();
    }
});

类型1
类型2
类型3
其他
函数ShowHideDiv（）
{
var ddlPassport=document.getElementById（“ddlPassport”）；
var dvPassport=document.getElementById（“dvPassport”）；
dvPassport.style.display=ddlPassport.value==“Y”？“块”：“无”；
dvPassport1.style.display=ddlPassport.value==“N”？“块”：“无”；
dvPassport2.style.display=ddlPassport.value==“D”？“块”：“无”；
}
输入数据：


输入数据：


输入数据：

虽然Cameron没有要求在选择任何其他选项时隐藏文本框…@ScottE：这是真的，但如果这不是OP的意图，我会非常惊讶。当然，以前从未听过任何人说过“不需要css”。你到底为什么要避免使用css？@David Hedlund，当jQuery内置了功能时，使用css来显示和隐藏元素有什么意义呢。我想如果你还想用算盘进行计算，那就继续吧，但是使用“显示/隐藏”要优雅得多。事实上，我发现大卫·赫德隆德的答案更优雅。如果您查看firebug中呈现的内容，您会发现css显示在封面下使用。我使用了

display

选项，可以使用三元操作，而不是几行

If

语句。如果您关注非结构化设计，此解决方案会更好。如果用户没有启用js，表单将显示得很好，使用david的解决方案，文本输入将永远不会显示。不知道为什么会被否决。它工作正常，只是“if”语句中有一个额外的“=”符号。

$('#sel').change(function() {
    var selected = $(this).val();
    if(selected == 'Other'){
      $('#other').show();
    }
    else{
      $('#other').hide();
    }
});

<select id = "ddlPassport" onchange = "ShowHideDiv()" style="width:150px;">
<option value="Y">Type 1</option>
<option value="Y">Type 2</option>
<option value="N">Type 3</option>
<option value="D">Other</option>
</select>


<script type="text/javascript">
    function ShowHideDiv() 
    {
    var ddlPassport = document.getElementById("ddlPassport");
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
    dvPassport1.style.display = ddlPassport.value == "N" ? "block" : "none";
    dvPassport2.style.display = ddlPassport.value == "D" ? "block" : "none";

    }



 <div id="dvPassport" style="display: none">
          <form action="viewdata.php" method="POST">
        Enter Data:
        <input type="text" id="txtPassportNumber" name="data" />
        <br>
        <input type="submit" value="Search" name="submit" 
     style="float:right;width:150px;margin-top:10px;">
    </form>
    </div>
    <div id="dvPassport1" style="display: none">
        <form action="viewdata.php" method="POST">
        Enter Data:
        <input type="number" id="txtPassportNumber" name="data"  />
         <br>
        <input type="submit" value="Search" name="submit" 
   style="float:right;width:150px;margin-top:10px;">
    </form>
    </div>
    <div id="dvPassport2" style="display: none">
        <form action="viewdata.php" method="POST">
        Enter Data:
        <input type="date" id="txtPassportNumber" name="data"  />
         <br>
        <input type="submit" value="Search" name="submit" 
       style="float:right;width:150px;margin-top:10px;">
    </form>
    </div>