在项目开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有自己需要的数据时，往往需要去管理这些列表数据的画面去添加，或者在下拉列表后面放一个快捷按钮，先添加，然后再选。
那么问题就来了，如果按照上面的操作，往往需要很多步骤，能不能当没有可选项目时，直接在下拉列表上输入呢？
答案是可以的。下面就是用 JS 实现了下拉列表上自定义选项的功能，请参考。
可编辑的下拉列表
.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;
}
—自定义—
开发部
市场部
销售部
function selectOnChangeFunc() {
document.getElementById(‘id_input’).value = document.getElementById(‘id_select’).options[document.getElementById(‘id_select’).selectedIndex].value;
}