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

I would like to have input field that users can enter custom text value or choose from drop down, normal select only offers drop down options.

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

How can it accept custom value for instance ford?

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

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

Edit: Removed dead link, solutions are in answers.

编辑：删除死链接，解决方案在答案中。

5 个解决方案

#1

130

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

HTML5有一个内置的组合框。您创建文本输入和数据列表。然后，您将一个list属性添加到输入，其值为datalist的id。

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>

IMPORTANT: Be aware that datalist does not work in all browser, actually its support is still very inmature as of 2018.Not supported by safari at all, and partially in all other except chrome.

重要提示：请注意，datalist在所有浏览器中都不起作用，实际上它的支持在2018年仍然非常不成熟.Navari根本不支持，部分除了chrome以外的所有其他浏览器。

#2

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>

#3

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，你可以根据他们选择的那个来切换禁用一个或另一个，例如，在下拉列表中有一个“其他”选项来触发文本字段。

#4

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.

我需要类似的东西，当我有一些固定的选项，我想要另一个选项可编辑！在这种情况下，我创建了一个隐藏的输入，它将与select选项重叠，并且可以编辑并使用jQuery使其全部无缝地工作。

I am sharing the fiddle with all of you!

我和你们所有人分享小提琴！

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

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/

#5

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>

#1

130