在选择下拉菜单中选择特定选项时添加输入框 [英] Add input-box when selecting a specific option into select drop down

问题描述

我需要在选择时将输入添加到选择选项。每当用户选择其他时，用户输入的数据就是输入框。

html：

 <选择> 
< option>选择您的名字< / option> 
< option> Frank< / option> 
< option> George< / option> 
< option>其他< / option> 
< / select> 
 
 <！ - 当选择其他选项时，添加输入
< label>输入您的姓名
<输入>< /输入> 
< / label> - > 
  

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

解决方案

您可以使用jquery .change（） 绑定元素的更改事件。

试试这个：

HTML

 < select> 
< option>选择您的名字< / option> 
< option> Frank< / option> 
< option> George< / option> 
< option>其他< / option> 
< / select> 
< label style =display：none;>输入您的姓名
<输入>< /输入> 
< / label> 
  

Jquery
< （$（'select option：selected'）。text（）==Other）{pre'$'$'$。
'（'label'）。show（）;
}
else {
$（'label'）。hide（）;
}
}）;

尝试小提琴

更新：

您也可以动态地添加一个输入框 -

HTML

 <选择> 
< option>选择您的名字< / option> 
< option> Frank< / option> 
< option> George< / option> 
< option>其他< / option> 
< / select> 
  

Jquery
< （$（'select option：selected'）。text（）==Other）{pre'$'$'$。 （< label>输入您的名称<输入>< /输入>< / label>）;
}
else {
$（'label'）。remove（）;
}
}）;

尝试小提琴

i need to add input to a select option when it is selected. whenever the user selects 'other' an input box is there for the user to enter in data.

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

my jsfiddle: http://jsfiddle.net/rynslmns/CxhGG/1/

解决方案

You can use jquery .change() to bind change event of an element.

Try this one:

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

Updated:

You can also add an input-box dynamically -

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

这篇关于在选择下拉菜单中选择特定选项时添加输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！