Выпадающий список HTML с полем ввода пользователя

У меня есть раскрывающийся список следующим образом.

<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-код для обработки записи, мне просто нужны некоторые идеи о том, как выполнить либо выключение раскрывающегося списка в поле ввода пользователя, либо какое-то другое решение. Спасибо за помощь!

Вот что-то вроде этого:

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

Вы можете использовать поле со списком: 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"/>

jQuery помогает:

 $("select[name='school']").change(function() { var val = $(this).val(); if(val == 'notlisted') { $('input[name="otherschool"]').show(); } else { $('input[name="otherschool"]').hide(); } }).change(); - $("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" />

Добавьте еще одно поле <option> со значением other, когда пользователь его выбирает, им разрешено вводить имя школы в поле ввода.

Почему бы не добавить кнопку рядом с этим падением? Не кажется интуитивным иметь запись в конце раскрывающегося списка. Как пользователь, я даже не разворачиваю выпадающее меню, просто просматривая текущие значения.