带有输入自定义值选项的 HTML 选择表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5650457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML select form with option to enter custom value
提问by Ib33X
I would like to have an input field that users can enter custom text value or choose from drop down. A regular <select>only offers drop down options.
我想要一个输入字段，用户可以输入自定义文本值或从下拉列表中进行选择。常规<select>只提供下拉选项。
How can I make a <select>accept custom value?For instance: Ford?
我怎样才能<select>接受自定义值？例如：福特？
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
回答by Dmitry
HTML5 has a built-in combo box. You create a text inputand a datalist. Then you add a listattribute to the input, with a value of the idof the datalist.
HTML5 有一个内置的组合框。您创建一个文本input和一个datalist. 然后你加list属性的input，带的一个值id的datalist。
Update:As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalistto the level needed for this functionality. See caniusefor detailed browser support.
更新：截至 2019 年 3 月，所有主要浏览器（现在包括 Safari 12.1 和 iOS Safari 12.3）都支持datalist此功能所需的级别。有关详细的浏览器支持，请参阅caniuse。
It looks like this:
它看起来像这样：
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>回答by mickmackusa
Alen Saqe's latest JSFiddle didn't toggle for me on Firefox, so I thought I would provide a simple html/javascript workaround that will function nicely within forms (regarding submission) until the day that the datalist tag is accepted by all browsers/devices. For more details and see it in action, go to: http://jsfiddle.net/6nq7w/4/Note: Do not allow any spaces between toggling siblings!
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>
回答by Alen Saqe
jQuery Solution!
jQuery 解决方案！
Demo: http://jsfiddle.net/69wP6/2/
演示：http: //jsfiddle.net/69wP6/2/
Another Demo Below(updated!)
下面的另一个演示（更新！）
I needed something similar in a case when i had some fixed Options and i wanted one other option to be editable! In this case i made a hidden input that would overlap the select option and would be editable and used jQuery to make it all work seamlessly.
当我有一些固定选项并且我希望另一个选项可编辑时，我需要类似的东西！在这种情况下，我做了一个隐藏的输入，它会与选择选项重叠，并且是可编辑的，并使用 jQuery 使其无缝工作。
I am sharing the fiddle with all of you!
我和大家分享小提琴！
HTML
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
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
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();
}
});
Edit : Added some simple touches design wise, so people can clearly see where the input ends!
编辑：明智地添加了一些简单的触摸设计，因此人们可以清楚地看到输入的结束位置！
JS Fiddle : http://jsfiddle.net/69wP6/4/
JS小提琴：http: //jsfiddle.net/69wP6/4/
回答by Sam
You can't really. You'll have to have both the drop down, and the text box, and have them pick or fill in the form. Without javascript you could create a separate radio button set where they choose dropdown or text input, but this seems messy to me. With some javascript you could toggle disable one or the other depending on which one they choose, for instance, have an 'other' option in the dropdown that triggers the text field.
你真的不能。您必须同时拥有下拉菜单和文本框，并让他们选择或填写表单。如果没有 javascript，您可以创建一个单独的单选按钮集，他们可以在其中选择下拉列表或文本输入，但这对我来说似乎很混乱。使用某些 javascript，您可以根据他们选择的一个来切换禁用一个或另一个，例如，在触发文本字段的下拉列表中有一个“其他”选项。
回答by Sogeking
If the datalist option doesn't fulfill your requirements, take a look to the Select2 library and the "Dynamic option creation"
如果 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>回答by dano
Using one of the above solutions ( @mickmackusa ), I made a working prototype in React 16.8+ using Hooks.
使用上述解决方案之一（@mickmackusa），我使用 Hooks 在 React 16.8+ 中制作了一个工作原型。
https://codesandbox.io/s/heuristic-dewdney-0h2y2
https://codesandbox.io/s/heuristic-dewdney-0h2y2
I hope it helps someone.
我希望它可以帮助某人。
