html5带下拉的输入框,javascript实现的一个带下拉框功能的文本框

可编辑可选择的下拉框

.list-name-input{

color: #333;

font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;

font-size: 15px;

font-weight: bold;

height: 50px;

margin: 0px;

padding: 0px;

position: relative;

width: 530px;

}

.list-name-for-select{

border: 0;

color: #555;

height: 20px;

lighting-color: rgb(255, 255, 255);

line-height: 20px;

margin:0 0 10px 0;

outline-color: #555;

outline-offset: 0px;

outline-style: none;

outline-width: 0px;

padding: 4px 6px;

position: absolute;

top: 1px;

left: 3px;

vertical-align: middle;

width: 486px;

}

.list-name-input-for-select:focus{

border: 0;

border-radius: 0;

}

.list-select{

background-color: #FFF;

border:1px #ccc solid;

border-radius: 4px;

color: #555;

cursor: pointer;

height: 30px;

left: 0px;

margin:0 0 10px 0;

padding: 4px 6px;

position: absolute;

top: 0px;

vertical-align: middle;

white-space: pre;

width: 530px;

}

新建

10-NGCFG-update-1000

11-NGCFG-update-1000

111

12-NGCFG-update-1000

13-NGCFG-update-1000

14-NGCFG-update-1000

15-NGCFG-update-1000

16-NGCFG-update-1000

17-NGCFG-update-1000

18-NGCFG-update-1257

2-NGCFG-update-100

3-NGCFG-update-150

4-NGCFG-update-200

5-NGCG-update-250

6-NGCFG-update-418

7-NGCFG-update-500

8-NGCFG-update-1000

9-NGCFG-update-1000

@ALL

@CNC-BJ-4

CNC-BJ--测试

test

var listName = document.getElementById('list-name-for-select');

var listSelect = document.getElementById('list-select').onchange = function(e){

console.log(this)

if(this.value){

listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;

}else{

listName.value = ''

}

};