带有用户输入字段的 HTML 下拉列表

Question

我有一个下拉列表如下..

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

如果输入数据库的联系人恰好居住在下拉列表中未列出的学区，则数据输入人员必须将学校添加到数据库中。如何在列表末尾添加一个选项，以允许最终用户输入学校名称。

我可以处理 PHP 代码来处理条目，我只需要一些关于如何将下拉列表变成用户输入字段或其他解决方案的想法。感谢您的帮助!

Answer 1

您可以使用组合框:输入+下拉列表。

http://javascript.about.com/library/blcombo.htm

演示:http://jsfiddle.net/P39W5/

或者您可以动态添加一个输入框:

http://jsfiddle.net/EMEVL/

JS:

$(document).ready(function() {
    $('#newSchool').hide();
    $("#schoolContainer").change(function() {
        var val = $(this).val();      
        if (val == 'Other School') {
            $('#newSchool').show();
        } else {
            $('#newSchool').hide();
        }
    }).change();
});

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