html语言下拉菜单,html 中可以自定义输入的 select 下拉列表

在项目开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有自己需要的数据时，往往需要去管理这些列表数据的画面去添加，或者在下拉列表后面放一个快捷按钮，先添加，然后再选。

那么问题就来了，如果按照上面的操作，往往需要很多步骤，能不能当没有可选项目时，直接在下拉列表上输入呢？

答案是可以的。下面就是用 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;

}