我想要一个输入字段，用户可以输入自定义文本值或从下拉列表中选择。普通的<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，其值为datalist 的id。
更新：截至 2019 年 3 月，所有主要浏览器（现在包括 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">
Alen Saqe 的最新 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 小提琴：http://jsfiddle.net/69wP6/4/
【讨论】：
如果 datalist 选项不能满足您的要求，请查看 Select2 库和“Dynamic option creation”
$(".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>【讨论】：
你真的不能。您必须同时拥有下拉菜单和文本框，并让他们选择或填写表格。如果没有 javascript，您可以创建一个单独的单选按钮集，让他们选择下拉或文本输入，但这对我来说似乎很乱。使用一些 javascript，您可以根据他们选择的选项来切换禁用一个或另一个，例如，在触发文本字段的下拉列表中有一个“其他”选项。
【讨论】：
使用上述解决方案之一 (@mickmackusa)，我使用 Hooks 在 React 16.8+ 中制作了一个工作原型。
https://codesandbox.io/s/heuristic-dewdney-0h2y2
我希望它对某人有所帮助。
【讨论】：