Budove Budove - 2 months ago 12
PHP Question

HTML Dropdown list with user input field

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!

Answer

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/