HTML 选择表单与选项，以输入自定义值

小开

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

小开

最佳答案

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

更新: 截至2019年3月，所有主流浏览器(现在包括 Safari 12.1和 iOS Safari 12.3)都支持 datalist到这一功能所需的级别。有关浏览器支持的详细信息，请参阅犬科动物。

它看起来像这样:

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

小开

JQuery 解决方案！

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

下面是另一个演示(更新!)

我需要一些类似的情况下，当我有一些固定的选项，我想其他选项是可编辑的！在这个例子中，我创建了一个隐藏的输入，它将重叠 select 选项并且是可编辑的，并且使用 jQuery 使它能够无缝地工作。

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

超文本标示语言

<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();
}
});

编辑: 增加了一些简单的触摸设计智慧，使人们可以清楚地看到输入结束的地方！

小提琴: http://jsfiddle.net/69wP6/4/

小开

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>

小开

如果 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>

小开

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

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

我希望能帮到别人。

小开

这是与@mickmackusa 相同的解决方案，但使用 jquery 编写:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" onchange="if($(this).val()=='customOption'){$(this).hide().prop('disabled',true);$('input[name=browser]').show().prop('disabled', false).focus();$(this).val(null);}">
<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).val()==''){$(this).hide().prop('disabled',true);$('select[name=browser]').show().prop('disabled', false).focus();}">
<input type="submit" value="Submit">
</form>

或许可读性更强的版本:

function toggle($toBeHidden, $toBeShown) {
$toBeHidden.hide().prop('disabled', true);
$toBeShown.show().prop('disabled', false).focus();
}


function showOptions(inputName) {
var $select = $(`select[name=${inputName}]`);
toggle($(`input[name=${inputName}]`), $select);
$select.val(null);
}




function showCustomInput(inputName) {
toggle($(`select[name=${inputName}]`), $(`input[name=${inputName}]`));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" onchange="if($(this).val()=='customOption')showCustomInput('browser')">
<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).val()=='')showOptions('browser')">
<input type="submit" value="Submit">
</form>