且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-25 17:18:40

这里有这样的事情:

 

< script src =https://ajax.googleapis.com/ ajax / libs / jquery / 1.7.2 / jquery.min.js>< / script>< select name =schoolid =schoolContainer> < option value =Noneselected>无< / 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 =家庭管理>家庭管理< / option>< / select> < input type =textid =newSchool/> < input type =buttonid =addSchoolvalue =Insert/>

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

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!

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

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