Javascript 在“选择”下拉列表中选择特定选项时添加输入框

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

html:

选择你的名字
直率的
乔治
其他

我的JSIDLE:

HTML:

注意“其他”选项上的

value=“其他”

属性。这就是脚本确定是否选择“其他”选项的方式

---

希望这有帮助

这是一个纯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>

//将此脚本放在标题中或选择元素上方
功能检查（elem）{
//使用一种可能的条件
//如果（元素值=='其他'）
if（elem.selectedIndex==3）{
document.getElementById（“其他div”）.style.display='block'；
}否则{
document.getElementById（“其他div”）.style.display='none'；
}
}
选择你的名字
直率的
乔治
其他
输入您的姓名

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

您可以使用jquery绑定元素的更改事件

试试这个：

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>

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

更新：

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

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>

<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"){
        $('label').show();
     }
     else{
        $('label').hide();
     }
 });

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

$（'select'）。更改（函数（）{
如果（$（'select option:selected'）。text（）=“其他”）{
$（'html select'）。之后（“输入您的姓名”）；
}
否则{
$（'label'）.remove（）；
}
});

---

您需要使用javascript或jQuery-从这里开始：我将发布一个非常类似的答案。它就在这把小提琴上：你也可以做$（“#choose”）.change（因为它是$（“#choose”）的快捷方式。在（“change”）上，

.change（）

可以工作，但是如果你选择实现它们，就不能扩展以适应事件名称空间。我想我也只使用了（

.on（））

出于习惯，哈哈。当我需要存储值时会发生什么？为发布目的指定的名称在哪里？最好使用相同的“名称”用户是手动输入数据还是选择一个选项。您可以使用post的输入字段，基本上在检查函数中添加一个名称，将其值更改为selected option，或者如果选择了“other”，则将其设置为空字符串。

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