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

Author: Budove, 2012-09-01
Source

5 answers

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

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

 0
Author: Damian SIlvera, 2015-09-09 20:27:29

Вы можете использовать поле со списком: Ввод+ Выпадающий список.

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"/>
 4
Author: user1626664, 2016-09-21 10:59:25

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" />
 1
Author: jtheman, 2012-08-31 23:16:53

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

 0
Author: Musa, 2012-08-31 23:16:17

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

 0
Author: Cody, 2012-08-31 23:17:07