在项目开发中,往往有这种需求:那就是需要下拉选择已有的数据列表,当没有自己需要的数据时,往往需要去管理这些列表数据的画面去添加,或者在下拉列表后面放一个快捷按钮,先添加,然后再选。
那么问题就来了,如果按照上面的操作,往往需要很多步骤,能不能当没有可选项目时,直接在下拉列表上输入呢?
答案是可以的。下面就是用 JS 实现了下拉列表上自定义选项的功能,请参考。
<!DOCTYPE html>
<html>
<head>
<title>可编辑的下拉列表</title>
</head>
<style type="text/css">
.cls_select_span {
position:absolute;
border:1pt solid #c1c1c1;
overflow:hidden;
width:188px;
height:19px;
clip:rect(-1px 190px 190px 170px);
}
.cls_input_span {
position:absolute;
border-top:1pt solid #c1c1c1;
border-left:1pt solid #c1c1c1;
border-bottom:1pt solid #c1c1c1;
width:170px;
height:19px;
}
.cls_option_defined {
color:#c2c2c2;
}
.cls_select {
width:190px;
height:20px;
margin:-2px;
}
.cls_input {
width:170px;
height:15px;
border:0pt;
}
</style>
<body>
<span class="cls_select_span">
<select id="id_select" class="cls_select" onChange="selectOnChangeFunc()">
<option value="" class="cls_option_defined">---自定义---</option>
<option value="开发部">开发部</option>
<option value="市场部">市场部</option>
<option value="销售部">销售部</option>
</select>
</span>
<span class="cls_input_span">
<input type="text" id="id_input" class="cls_input" value="可选择也可自定义输入">
</span>
<script>
function selectOnChangeFunc() {
document.getElementById('id_input').value = document.getElementById('id_select').options[document.getElementById('id_select').selectedIndex].value;
}
</script>
</body>
</html>