1、方案一
方案思路:输入框和下拉小三角紧密拼合,使样式上看起来像一个单纯的下拉框
① 优点:思路清晰,实现简单
② 缺点:样式很难做兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InputSelect</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<style>
.di {
position: relative; /*must*/
}
.sel {
height: 25px;
width: 150px;
margin: 10px;
padding: 0px;
position: absolute; /*must*/
}
.inp {
height: 21px;
width: 130px;
margin: 10px;
padding: 0px;
position: absolute; /*must*/
}
</style>
<body>
<div class="di">
<select id="unit1" class="sel" onchange="changeUnit()">
<option value="m">米</option>
<option value="cm">厘米</option>
<option value="mm">毫米</option>
</select>
<input type="text" id="unit2" class="inp">
</div>
</body>
</html>
<script type="text/javascript">
function changeUnit() {
var text = $("#unit1").find("option:selected").text();
$("#unit2").val(text);/*must*/
}
</script>
效果图:
参考资料,链接
2、方案二
方案思路:监听键盘事件,将键盘输入值动态写入<option/>第一行
① 优点:样式无关,耦合度低
② 缺点:只能输入键盘字符,没法输入中文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InputSelect</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<style>
.sel {
height: 25px;
width: 150px;
margin: 10px;
padding: 0px;
}
</style>
<body>
<select class="sel" onkeydown="inputSelect.del(this,event)"
onkeyup="inputSelect.write(this,event)">
<option value=""></option><!--must-->
<option value="m">米</option>
<option value="cm">厘米</option>
<option value="mm">毫米</option>
</select>
</body>
<script type="text/javascript">
var inputSelect = {
del: function (obj, e) {
if ((e.keyCode || e.which || e.charCode) == 8) {
var opt = obj.options[0];
opt.text = opt.value = opt.value.substring(0, opt.value.length > 0 ? opt.value.length - 1 : 0);
}
},
write: function (obj, e) {
if ((e.keyCode || e.which || e.charCode) == 8) return;
var opt = obj.options[0];
opt.selected = "selected";
opt.text = opt.value += String.fromCharCode(e.charCode || e.which || e.keyCode);
}
};
</script>
</html>
效果图:
参考资料,链接
3、方案三
方案思路:引入第三方插件,如jquery-editable-select
下载地址:https://github.com/indrimuska/jquery-editable-select
① 优点:不用自己实现代码,快捷方便
② 缺点:样式未必符合需求,要自己动手改css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>editable-select</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-editable-select.css"/>
<script type="text/javascript" src="jquery-editable-select.js"></script>
</head>
<body>
<select id="unit">
<option value="m">米</option>
<option value="cm">厘米</option>
<option value="mm">毫米</option>
</select>
</body>
<script type="text/javascript">
$("#unit").editableSelect();
</script>
</html>
效果图:
4、方案四
方案思路:结合方案二和方案一,监听事件实现显隐下拉框和输入框
① 优点:简单易维护
② 缺点:耦合度高,输入框和下拉框的长宽要保持一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>editAbleSelect</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<style>
.sel {
height: 25px;
width: 150px;
margin: 10px;
padding: 0px;
}
.inp {
height: 20px; /*attention*/
width: 145px; /*attention*/
margin: 10px;
padding: 0px;
}
</style>
<body>
<select class="sel" onkeypress="editAbleSelect.start(this,event)">
<option value=""></option>
<option value="m">米</option>
<option value="cm">厘米</option>
<option value="mm">毫米</option>
</select>
<input class="inp" type="text" style="display: none;" onblur="editAbleSelect.end(this,event)"/>
</body>
<script type="text/javascript">
/**
* <select/>必须排列在<input/>之前
* <select/> 至少有一个option
* 建议第一个option为 <option value=""></option>
*/
var editAbleSelect = {
start: function (obj, e) {//回车事件
if ((e.keyCode || e.which || e.charCode) == 13) {
var select = $(obj);
var input = select.next();
var value = select.val();
input.val(value);
select.hide();
input.show();
input.focus();
}
},
end: function (obj, e) {//失焦点事件
var input = $(obj);//dom → jdom
var select = input.prev();
var value = input.val();
var option = select.children(":first");
option.attr("selected", true);
option.text(value);
option.val(value);
select.show();
input.hide();
}
};
</script>
</html>
效果图: