带用户输入字段的HTML下拉列表 [英] HTML Dropdown list with user input field

问题描述

 < select name =school><选项值=无选择>无< / 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> 
  

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

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

解决方案

这里有这样的事情：

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

这篇关于带用户输入字段的HTML下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！