jQuery 在选择选项时显示一个文本框答案

【问题标题】：jQuery Show a Textbox When an Option is SelectedjQuery 在选择选项时显示一个文本框
【发布时间】：2011-01-31 05:22:12
【问题描述】：

我有以下代码：

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

我想要做的是使用 jQuery 使下面的文本框默认隐藏，然后如果用户从下拉列表中选择另一个选项，则显示它。

【问题讨论】：

标签： javascript jquery hide show

【解决方案1】：

这里不需要任何CSS。

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

【讨论】：

肯定从未听过有人说“不需要css”。你到底为什么要避免使用 css？
@David Hedlund，当 jQuery 具有内置功能时，使用 css 显示和隐藏元素有什么意义。我想如果你仍然想用算盘进行计算，但使用 show/ hide 更加优雅。
实际上，我发现 David Hedlund 的回答更优雅。如果您查看在 firebug 中呈现的内容，您会发现无论如何都在使用 css 显示。
我选择了display 选项，以便能够使用三元运算而不是多行if 语句。
necroposting 在这里，但如果您完全关心不显眼的设计，这个解决方案会更好。如果用户没有启用js，表单会显示得很好，使用大卫的解决方案，文本输入将永远不会显示。

【解决方案2】：

<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');
});

【讨论】：

尽管如果选择了任何其他选项，Cameron 并没有要求隐藏文本框...
@ScottE：这是真的，但如果这不是 OP 的意图，我会感到非常惊讶。

【解决方案3】：

试试这个：

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

JQuery：

$(function(){
  // hide by default
  $('other').css('display', 'none');

  $('selectbox_id').change(function(){
   if ($(this).val() === 'Other') {
     $('other').css('display', 'block');
   }
 });
});

【讨论】：

不知道为什么这被否决了。它工作正常，只是在“if”语句中有一个额外的“=”符号。

【解决方案4】：

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

【讨论】：