javascript 在选择下拉列表中选择特定选项时添加输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21468436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add input-box when selecting a specific option into select drop down
提问by Ryan Salmons
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:
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/
我的 jsfiddle：http: //jsfiddle.net/rynslmns/CxhGG/1/
回答by Ishan Jain
You can use jquery .change()to bind change event of an element.
您可以使用 jquery.change()绑定元素的更改事件。
Try this one:
试试这个：
HTML
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();
}
});
Updated:
更新：
You can also add an input-box dynamically -
您还可以动态添加输入框 -
HTML
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();
}
});
回答by theftprevention
HTML:
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:
jQuery：
$(document).ready(function() {
$("#choose").on("change", function() {
if ($(this).val() === "other") {
$("#otherName").show();
}
else {
$("#otherName").hide();
}
});
});
Note the value="other"attribute on the "Other" option. That's how the script determines if the "Other" option is selected.
请注意value="other"“其他”选项上的属性。这就是脚本如何确定是否选择了“其他”选项。
Hope this helps!
希望这可以帮助！
回答by Goran.it
Here is a pure javascript version, no jQuery needed:
这是一个纯 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>
As stated before, add onChange event, link it to function and there process what should be displayed etc.
如前所述，添加 onChange 事件，将其链接到函数，然后处理应该显示的内容等。
