在选择下拉菜单中选择特定选项时添加输入框答案

【问题标题】：Add input-box when selecting a specific option into select drop down在选择下拉菜单中选择特定选项时添加输入框
【发布时间】：2014-02-23 11:03:51
【问题描述】：

我需要在选择选项时添加输入。每当用户选择“其他”时，都会有一个输入框供用户输入数据。

HTML：

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>

<!-- when other is selected add input
<label>Enter your Name
<input></input>
</label> -->

我的 jsfiddle：http://jsfiddle.net/rynslmns/CxhGG/1/

【问题讨论】：

您需要使用 javascript 或 jQuery - 从这里开始：api.jquery.com/change

标签： javascript jquery html select input

【解决方案1】：

您可以使用 jquery .change() 来绑定元素的更改事件。

试试这个：

HTML

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>
<label style="display:none;">Enter your Name
<input></input>
</label>

jQuery

$('select').change(function(){
     if($('select option:selected').text() == "Other"){
        $('label').show();
     }
     else{
        $('label').hide();
     }
 });

Try in Fiddle

更新：

您还可以动态添加输入框 -

HTML

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>

jQuery

$('select').change(function(){
   if($('select option:selected').text() == "Other"){
        $('html select').after("<label>Enter your Name<input></input></label>");
   }
   else{
        $('label').remove();
   }
});

Try in Fiddle

【讨论】：

【解决方案2】：

See it in action here.

HTML：

<select id="choose">
    <option>Choose Your Name</option>
    <option>Frank</option>
    <option>George</option>
    <option value="other">Other</option>
</select>
<label id="otherName">Enter your Name
    <input type="text" name="othername" />
</label>

jQuery:

$(document).ready(function() {
    $("#choose").on("change", function() {
        if ($(this).val() === "other") {
            $("#otherName").show();
        }
        else {
            $("#otherName").hide();
        }
    });
});

注意“其他”选项上的value="other" 属性。这就是脚本确定是否选择了“其他”选项的方式。

希望这会有所帮助！

【讨论】：

我打算发布一个非常相似的答案。它在这个小提琴上：jsfiddle.net/rynslmns/CxhGG/1
你也可以这样做 $("#choose").change( 因为它是 $("#choose").on("change", api.jquery.com/change 的快捷方式
.change() 可以，是的，但如果您应该选择实现它们，则无法扩展以适应事件命名空间。我想我也只是出于习惯使用.on()，哈哈。

【解决方案3】：

这里是纯javascript版本，不需要jQuery：

<script>
// Put this script in header or above select element
    function check(elem) {
        // use one of possible conditions
        // if (elem.value == 'Other')
        if (elem.selectedIndex == 3) {
            document.getElementById("other-div").style.display = 'block';
        } else {
            document.getElementById("other-div").style.display = 'none';
        }
    }
</script>

<select id="mySelect" onChange="check(this);">
        <option>Choose Your Name</option>
        <option>Frank</option>
        <option>George</option>
        <option>Other</option>
</select>
<div id="other-div" style="display:none;">
        <label>Enter your Name
        <input id="other-input"></input>
        </label>
</div>

jsFidle

如前所述，添加 onChange 事件，将其链接到函数并在那里处理应该显示的内容等。

【讨论】：

当我需要存储值时会发生什么？在哪里为帖子指定了名称？无论用户手动输入数据还是选择选项，都最好使用相同的“名称”。
您可以只使用输入字段进行发布，基本上将名称添加到并在检查函数内部将其值更改为选定选项 - 或者如果选择“其他”，则将其设置为空字符串.