Я хотел бы иметь поле ввода, в которое пользователи могут вводить пользовательское текстовое значение или выбирать из раскрывающегося списка. Обычный <select>предлагает только выпадающие варианты.
Как я могу <select>принять индивидуальное значение? Например: Форд?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Ответы:
HTML5 имеет встроенное поле со списком. Вы создаете текст
inputи файлdatalist. Затем добавитьlistатрибут кinput, со значением изidизdatalist.Обновление: по состоянию на март 2019 года все основные браузеры (теперь включая Safari 12.1 и iOS Safari 12.3) поддерживают
datalistуровень, необходимый для этой функции. См. Caniuse для подробной поддержки браузера.Выглядит это так:
<input type="text" list="cars" /> <datalist id="cars"> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </datalist>источник
<input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">Последний JSFiddle от Алена Саке не переключался для меня в Firefox, поэтому я подумал, что предоставлю простой обходной путь html / javascript, который будет хорошо работать в формах (относительно отправки) до того дня, когда тег datalist будет принят всеми браузерами / устройствами. Для получения дополнительных сведений и ознакомления с этим в действии перейдите по адресу : http://jsfiddle.net/6nq7w/4/ Примечание. Не допускайте пробелов между переключаемыми братьями и сестрами!
<!DOCTYPE html> <html> <script> function toggleField(hideObj,showObj){ hideObj.disabled=true; hideObj.style.display='none'; showObj.disabled=false; showObj.style.display='inline'; showObj.focus(); } </script> <body> <form name="BrowserSurvey" action="#"> Browser: <select name="browser" onchange="if(this.options[this.selectedIndex].value=='customOption'){ toggleField(this,this.nextSibling); this.selectedIndex='0'; }"> <option></option> <option value="customOption">[type a custom value]</option> <option>Chrome</option> <option>Firefox</option> <option>Internet Explorer</option> <option>Opera</option> <option>Safari</option> </select><input name="browser" style="display:none;" disabled="disabled" onblur="if(this.value==''){toggleField(this,this.previousSibling);}"> <input type="submit" value="Submit"> </form> </body> </html>источник
Решение jQuery!
Демо: http://jsfiddle.net/69wP6/2/
Еще одна демонстрация ниже (обновлена!)
Мне нужно было что-то подобное в случае, когда у меня были фиксированные параметры, и я хотел, чтобы еще один вариант можно было редактировать! В этом случае я сделал скрытый ввод, который перекрывал бы опцию выбора и был бы редактируемым, и использовал jQuery, чтобы все это работало без проблем.
Я делюсь со всеми вами скрипкой!
HTML
<div id="billdesc"> <select id="test"> <option class="non" value="option1">Option1</option> <option class="non" value="option2">Option2</option> <option class="editable" value="other">Other</option> </select> <input class="editOption" style="display:none;"></input> </div>CSS
body{ background: blue; } #billdesc{ padding-top: 50px; } #test{ width: 100%; height: 30px; } option { height: 30px; line-height: 30px; } .editOption{ width: 90%; height: 24px; position: relative; top: -30px }jQuery
var initialText = $('.editable').val(); $('.editOption').val(initialText); $('#test').change(function(){ var selected = $('option:selected', this).attr('class'); var optionText = $('.editable').text(); if(selected == "editable"){ $('.editOption').show(); $('.editOption').keyup(function(){ var editText = $('.editOption').val(); $('.editable').val(editText); $('.editable').html(editText); }); }else{ $('.editOption').hide(); } });Изменить: добавлено несколько простых штрихов в дизайн, чтобы люди могли четко видеть, где заканчивается ввод!
JS Fiddle: http://jsfiddle.net/69wP6/4/
источник
Вы действительно не можете. Вам нужно будет иметь как раскрывающийся список, так и текстовое поле, и они должны выбрать или заполнить форму. Без javascript вы можете создать отдельный набор переключателей, где они выбирают раскрывающийся список или ввод текста, но мне это кажется беспорядочным. С помощью некоторого javascript вы можете отключить один или другой в зависимости от того, какой из них они выберут, например, в раскрывающемся списке есть вариант «другой», который запускает текстовое поле.
источник
Если опция datalist не соответствует вашим требованиям, обратите внимание на библиотеку Select2 и « Создание динамической опции »
$(".js-example-tags").select2({ tags: true });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select class="form-control js-example-tags"> <option selected="selected">orange</option> <option>white</option> <option>purple</option> </select>источник
Используя одно из вышеперечисленных решений (@mickmackusa), я сделал рабочий прототип в React 16.8+ с помощью хуков.
https://codesandbox.io/s/heuristic-dewdney-0h2y2
Надеюсь, это кому-то поможет.
источник