HTML选择表单，带有输入自定义值的选项

Question 1

我希望有一个输入字段，用户可以输入自定义文本值或从下拉菜单中选择。普通<select>只提供下拉选项。

我如何才能<select>接受自定义值？例如：福特？

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Question 2

HTML5具有内置的组合框。您创建一个文本input和一个datalist。然后，您向中添加一个list属性input，其值为id的datalist。

更新：自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>

展开摘要

Question 3

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>

Question 4

jQuery解决方案！

演示：http : //jsfiddle.net/69wP6/2/

下面的另一个演示（已更新！）

当我有一些固定的选项并且我希望另一个选项可编辑时，我需要类似的东西！在这种情况下，我做了一个隐藏的输入，该输入将与select选项重叠，并且是可编辑的，并使用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/

Question 5

你真的不能。您必须同时具有下拉菜单和文本框，并让他们选择或填写表单。没有javascript，您可以创建一个单独的单选按钮集，以便他们在其中选择下拉菜单或文本输入，但这对我来说似乎很混乱。使用某些javascript，您可以根据自己选择的哪个来切换禁用一个或另一个，例如，在下拉菜单中有一个“ other”选项来触发文本字段。

Question 6

如果数据列表选项不能满足您的要求，请查看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>

展开摘要

Question 7

使用上述解决方案之一（@mickmackusa），我使用Hooks在React 16.8+中制作了一个工作原型。

https://codesandbox.io/s/heuristic-dewdney-0h2y2

希望对您有所帮助。