Question

我想有输入字段，用户可以输入自定义文本值或从下拉菜单中选择，普通选择仅提供下拉选项。

如何接受例如福特的自定义值？

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

修改：删除了死链接，解决方案就在答案中。

Answer 1

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

请注意datalist 无法在所有浏览器中使用。有关详细的浏览器支持，请参阅caniuse。

看起来像这样：

datalist

Answer 2

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>

Answer 3

你不能真的。您必须同时拥有下拉列表和文本框，并让他们选择或填写表单。没有javascript你可以创建一个单独的单选按钮设置，他们选择下拉列表或文本输入，但这对我来说似乎很麻烦。使用一些javascript，你可以根据他们选择的那个来切换禁用其中一个，例如，在下拉列表中有一个“其他”选项来触发文本字段。

Answer 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/

Answer 5

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

Answer 6

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

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

我希望它能对某人有所帮助。

HTML选择表单，可选择输入自定义值

6 个答案: