В приложении Windows Forms список выпадающих списков также дает пользователю возможность ввести альтернативное значение в это же поле (при условии, что разработчик оставил эту опцию включенной в элементе управления.)
Как это сделать в HTML? Кажется, что можно только выбрать значения из списка.
Если это невозможно сделать с помощью прямого HTML, есть ли способ сделать это с помощью Javascript?
Теперь это можно сделать с помощью HTML5
Смотрите это сообщение здесь HTML-форму для выбора с возможностью ввода пользовательского значения
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>
У меня возникла одна и та же основная проблема: попытка объединить функциональность текстового поля и поля выбора, которые принципиально отличаются друг от друга в спецификации html.
Хорошей новостью является то, что selectize.js делает именно это:
Selectize - это гибрид текстового поля и поля. Это jQuery-based и полезно для тегов, списков контактов, селекторов и т.д.
Самый простой способ сделать это - использовать jQuery: jQuery UI combobox/autocomplete
В ExtJS есть элемент управления ComboBox, который может это сделать (и целый ряд других интересных вещей!!)
EDIT: просмотрите все элементы управления и т.д., здесь: http://www.sencha.com/products/js/
Другим распространенным решением является добавление опции "Другое.." в раскрывающееся меню и при выбранном текстовом поле, которое иначе скрыто. Затем при отправке формы назначьте значение скрытого поля либо с выпадающим, либо с текстовым полем, а в код на стороне сервера проверьте скрытое значение.
Пример: 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" из запроса.
Telerik также имеет элемент управления со списком. По сути, это текстовое поле с изображениями, которые при нажатии на них показывают панель со списком предопределенных параметров.
http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx
Но это AJAX, поэтому он может иметь больший размер, чем вы хотите на своем сайте (так как вы говорите "HTML" ).
Мне нравится ответ 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");
});
Любой, кто ищет легкое решение jQuery без необходимости реализовать все это безумие на сайте автозаполнения jQuery UI, см. здесь:
http://www.benknowscode.com/2013/03/finishing-jquery-ui-autocomplete_4743.html
Этот парень в основном создал расширение для настройки combobox, используемое в примере пользовательского интерфейса jQuery. Он также немного расширил его.
Просто назовите его:
$('.your-select-element').combobox();