具有用户输入字段的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

下面是类似这样的内容：

​

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

​

http://jsfiddle.net/damian_silvera/NcpKp/

Answer 2

你可以使用一个组合框: Input+Dropdown list。

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

Answer 3

jQuery可以帮助您：

$("select[name='school']").change(function() {
    var val = $(this).val();
    if(val == 'notlisted') {
        $('input[name="otherschool"]').show();
    } else {
        $('input[name="otherschool"]').hide();
    }
}).change();

然后在HTML中

<input type="text" name="otherschool" style="display:none" />