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

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

它如何接受例如ford的自定义值？

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

编辑：去掉死链接，解决方案是答案。

来源

2011-04-13 Ib33X

你可以使用JavaScript动态地添加一个选项来选择，但再利用该信息将成为一个真正的痛苦。 – David 2011-04-13 14:11:53

你可以做一点脚本！我在下面回答了！ – 2014-11-14 12:47:36

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

来源

2011-04-13 14:06:28 Sam

根据你所描述的，我在下面的评论中有简单的代码！全部异步！ – 2014-05-23 13:17:52

选择的答案应该更新为Dmitry，低于 – Mark 2017-05-27 23:19:10

116

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

它看起来像这样：

<input type="text" list="cars" /> 
 
<datalist id="cars"> 
 
    <option>Volvo</option> 
 
    <option>Saab</option> 
 
    <option>Mercedes</option> 
 
    <option>Audi</option> 
 
</datalist>

重要： 注意datalist不并不适用于所有浏览 R，实际上它支持is still very inmature as of 2018。不Safari支援在所有其他部分，除铬以外的所有其他部分。

来源

2014-02-22 18:06:05 Dmitry

此功能仅支持约50％的浏览器。只有最新的firefox，chrome和opera支持这个; IE，Safari和移动浏览器不。请参阅[http://caniuse.com/]（http://caniuse.com/#feat=datalist） – markmarijnissen 2014-03-13 10:37:54

它在IE 10+中起作用。即使你给出的消息来源也这么说。 – Dmitry 2014-03-19 08:46:53

即使在现在，它在Safari上也不起作用。 – chowey 2015-12-20 06:05:41

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/

来源

2014-05-23 13:15:51

阿伦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>

来源

2014-05-28 03:23:39 mickmackusa

我想再次穿过那条小路！女巫版本的Firefox不支持那里！我测试了一些我不记得的版本！奖励！ – 2014-11-14 12:48:54

我不知道我在哪个版本的FF上。我只是看了一下FF34.0，现在我正在获得功能，所以不用担心。但是，默认的切换选项“其他”可以清除。当我通过编辑该值来删除“其他”时，该dropmenu不提供直观的值来选择（以访问编辑功能）。我认为这归结于个人偏好。由于当字段可编辑时，dropmenu箭头仍然存在，用户可能不会意识到该字段是可编辑的。不要嘲笑你;只是一些反馈。我的代码段也考虑了

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

回答

相关问题