Вручную введите значение в списке "Выбрать" / "Выпадающий список HTML"?

Ответ 1

Теперь это можно сделать с помощью HTML5

Смотрите это сообщение здесь HTML-форму для выбора с возможностью ввода пользовательского значения

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

Ответ 2

У меня возникла одна и та же основная проблема: попытка объединить функциональность текстового поля и поля выбора, которые принципиально отличаются друг от друга в спецификации html.

Хорошей новостью является то, что selectize.js делает именно это:

Selectize - это гибрид текстового поля и поля. Это jQuery-based и полезно для тегов, списков контактов, селекторов и т.д.

Ответ 3

Самый простой способ сделать это - использовать jQuery: jQuery UI combobox/autocomplete

Ответ 4

В ExtJS есть элемент управления ComboBox, который может это сделать (и целый ряд других интересных вещей!!)

EDIT: просмотрите все элементы управления и т.д., здесь: http://www.sencha.com/products/js/

Ответ 5

Другим распространенным решением является добавление опции "Другое.." в раскрывающееся меню и при выбранном текстовом поле, которое иначе скрыто. Затем при отправке формы назначьте значение скрытого поля либо с выпадающим, либо с текстовым полем, а в код на стороне сервера проверьте скрытое значение.

Пример: http://jsfiddle.net/c258Q/

Код HTML:

Please select: <form onsubmit="FormSubmit(this);">
<input type="hidden" name="fruit" />
<select name="fruit_ddl" onchange="DropDownChanged(this);">
    <option value="apple">Apple</option>
    <option value="orange">Apricot </option>
    <option value="melon">Peach</option>
    <option value="">Other..</option>
</select> <input type="text" name="fruit_txt" style="display: none;" />
<button type="submit">Submit</button>
</form>

JavaScript:

function DropDownChanged(oDDL) {
    var oTextbox = oDDL.form.elements["fruit_txt"];
    if (oTextbox) {
        oTextbox.style.display = (oDDL.value == "") ? "" : "none";
        if (oDDL.value == "")
            oTextbox.focus();
    }
}

function FormSubmit(oForm) {
    var oHidden = oForm.elements["fruit"];
    var oDDL = oForm.elements["fruit_ddl"];
    var oTextbox = oForm.elements["fruit_txt"];
    if (oHidden && oDDL && oTextbox)
        oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
}

И на стороне сервера прочитайте значение "fruit" из запроса.

Ответ 6

Telerik также имеет элемент управления со списком. По сути, это текстовое поле с изображениями, которые при нажатии на них показывают панель со списком предопределенных параметров.

http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

Но это AJAX, поэтому он может иметь больший размер, чем вы хотите на своем сайте (так как вы говорите "HTML" ).

Ответ 7

Мне нравится ответ Shadow Wizard, который отвечает на вопрос довольно красиво. Мой jQuery твист на этом, который я использую здесь. http://jsfiddle.net/UJAe4/

После ввода нового значения форма готова к отправке, просто нужно обрабатывать новые значения на задней панели.

jQuery:

(function ($) 
{
 $.fn.otherize = function (option_text, texts_placeholder_text) {
    oSel = $(this);
    option_id = oSel.attr('id') + '_other';
    textbox_id = option_id + "_tb";

    this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>");
    this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>");
    this.change(

    function () {
        oTbox = oSel.parent().children('#' + textbox_id);
        oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
    });

    $("#" + textbox_id).change(

    function () {
        $("#" + option_id).val($("#" + textbox_id).val());
    });
};
}(jQuery));

Итак, вы примените это к нижнему html:

<form>
    <select id="otherize_me">
        <option value=1>option 1</option>
        <option value=2>option 2</option>
        <option value=3>option 3</option>
    </select>
</form>

Точно так же:

$(function () {

   $("#otherize_me").otherize("other..", "put new option vallue here");

});

Ответ 8

Любой, кто ищет легкое решение jQuery без необходимости реализовать все это безумие на сайте автозаполнения jQuery UI, см. здесь:

http://www.benknowscode.com/2013/03/finishing-jquery-ui-autocomplete_4743.html

Этот парень в основном создал расширение для настройки combobox, используемое в примере пользовательского интерфейса jQuery. Он также немного расширил его.

Просто назовите его:

$('.your-select-element').combobox();