我想有输入字段,用户可以输入自定义文本值或从下拉菜单中选择,正常选择仅提供下拉选项.
它如何接受例如福特的自定义价值？
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
编辑:删除死链接,解决方案在答案中.
Dmi*_*try 176
HTML5有一个内置的组合框.你创建一个文本input和一个datalist.然后你加list属性的input,带的一个值id的datalist.
它看起来像这样:
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>重要提示:
请注意,在所有浏览器中都不起作用,实际上它的支持在2018年仍然非常不成熟.datalist根本不支持safari,部分支持除chrome以外的所有其他浏览器.
mic*_*usa 21
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>
Ale*_*aqe 11
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/
Sam*_*Sam 10
你不能真的.您必须同时拥有下拉列表和文本框,并让他们选择或填写表单.没有javascript你可以创建一个单独的单选按钮设置,他们选择下拉列表或文本输入,但这对我来说似乎很麻烦.使用一些javascript,您可以切换禁用其中一个或另一个,具体取决于他们选择哪一个,例如,在下拉列表中有一个"其他"选项来触发文本字段.
如果数据列表选项不能满足您的要求，请查看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>| 归档时间： |
|
| 查看次数： |
132508 次 |
| 最近记录： |