带有用户输入字段的 HTML 下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12223497/
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
HTML Dropdown list with user input field
提问by Budove
I have a dropdown list as follows..
我有一个下拉列表如下..
<select name="school"><option value="None" selected>None</option>
<option value="DeSoto">DeSoto</option>
<option value="Hillsboro">Hillsboro</option>
<option value="Grandview">Grandview</option>
<option value="Festus">Festus</option>
<option value="R-7">R-7</option>
<option value="Home-Schooled">Home-Schooled</option>
If the contact being entered in the database happens to live in a school district not listed in the dropdown list, the data entry person would have to add a school to the database. How can I add a selection to the end of the list that would allow the end user to enter a school name.
如果在数据库中输入的联系人碰巧居住在下拉列表中未列出的学区，则数据输入人员必须将学校添加到数据库中。如何在列表末尾添加一个选项，以允许最终用户输入学校名称。
I can handle the PHP code to process the entry, I just need some ideas on how to accomplish either turning the dropdown list into a user input field, or some other solution. Thanks for the help!
我可以处理 PHP 代码来处理条目，我只需要一些关于如何完成将下拉列表转换为用户输入字段或其他解决方案的想法。谢谢您的帮助！
采纳答案by Damian SIlvera
Here its something like that:
这里是这样的：
$(document).ready(function(){
$("#addSchool").click(function(){
$("#schoolContainer").append('<option value="' + $("#newSchool").val() + '">' + $("#newSchool").val() + '</option>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="school" id="schoolContainer">
<option value="None" selected>None</option>
<option value="DeSoto">DeSoto</option>
<option value="Hillsboro">Hillsboro</option>
<option value="Grandview">Grandview</option>
<option value="Festus">Festus</option>
<option value="R-7">R-7</option>
<option value="Home-Schooled">Home-Schooled</option>
</select>
<input type="text" id="newSchool"/>
<input type="button" id="addSchool" value="Insert"/>回答by user1626664
You can use a combo box : Input+Dropdown list.
您可以使用组合框：输入+下拉列表。
http://javascript.about.com/library/blcombo.htm
http://javascript.about.com/library/blcombo.htm
Demo: http://jsfiddle.net/P39W5/
演示：http: //jsfiddle.net/P39W5/
ORyou can dynamically add a input box:
或者你可以动态添加一个输入框：
JS:
JS：
$(document).ready(function() {
$('#newSchool').hide();
$("#schoolContainer").change(function() {
var val = $(this).val();
if (val == 'Other School') {
$('#newSchool').show();
} else {
$('#newSchool').hide();
}
}).change();
});
HTML:
HTML：
School: <select name="school" id="schoolContainer">
<option value="None" selected>None</option>
<option value="DeSoto">DeSoto</option>
<option value="Hillsboro">Hillsboro</option>
<option value="Grandview">Grandview</option>
<option value="Festus">Festus</option>
<option value="R-7">R-7</option>
<option value="Home-Schooled">Home-Schooled</option>
<option value="Other School">Other School</option>
</select>
<input type="text" id="newSchool"/>
<input type="button" id="otherschool" value="Insert"/>
回答by jtheman
jQuery helps:
jQuery 帮助：
$("select[name='school']").change(function() {
var val = $(this).val();
if(val == 'notlisted') {
$('input[name="otherschool"]').show();
} else {
$('input[name="otherschool"]').hide();
}
}).change();
and then in HTML
然后在 HTML 中
<input type="text" name="otherschool" style="display:none" />
回答by Cody
Why not have an add button next to this drop down? It doesn't seem intuitive to have the entry at the end of a drop down. As a user I my not even expand the drop down just scroll through the current values.
为什么不在这个下拉菜单旁边有一个添加按钮？在下拉列表的末尾输入似乎并不直观。作为用户，我什至不展开下拉菜单，只需滚动当前值。
回答by Musa
Add another <option>field with value other, when the user selects it they are allowed to enter the school name in an input box.
添加另一个<option>值为 other 的字段，当用户选择它时，他们可以在输入框中输入学校名称。
