可输入的下拉框

最新推荐文章于 2024-10-17 09:40:47 发布

iteye_15245

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量70

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<body>
<p align="center">
<select id='sel2' style='width:200px'>
<option value=''></option>
<option value='选项一'>选项一</option>
<option value='选项二'>选项二</option>
</select>
</p>

<button οnclick="getSelectedValue()"> test</button>

<select id="input_select1" style="width:100px">
<option value=""></option>
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
</select>

<select id="input_select2"" style="width:100px">
<option value=""></option>
<option value="CCC">CCC</option>
<option value="DDD">DDD</option>
</select>
<script language="JavaScript">
/*****
**@param id SLEECT标签的唯一编号
**@param maxLength 下拉框能输入的最多字符数，该参数可以不传入
*/
function regInputSelect(id, maxLength){
var obj = document.getElementById(id);
var input = document.createElement("input");
input.type = "text";
if(typeof(maxLength) != "undefined"){
input.maxLength = maxLength;
}
//设置输入框的样式
with(input.style){
position = "absolute";
top = (obj.offsetTop + 1) + "px";
left = (obj.offsetLeft + 1) + "px";
width = (obj.offsetWidth - 18) + "px";
border = "0px";
}
obj.parentNode.insertBefore(input, obj);
input.value = obj.value;
obj.onchange = function(){
input.value = this.value;
}
var options_map = new Array();
input.onblur = function(){
var value = input.value;
if(value == ""){
return;
}
//判断当前输入的值在下列列表中是否存在，如果不存在，则新增项
if(typeof(options_map[value]) == "undefined"){
var option = new Option(value,value);
option.title = value;
obj.add(option);
//选中最后新加的一项
obj.selectedIndex = obj.options.length -1;
options_map[value] = value;
input.style.width = (obj.offsetWidth - 18) + "px";
}
}
//初始化下拉框的项
initOptions(obj, options_map);

}
function initOptions(obj,options_map){
var len = obj.options.length;
for(var i = 0 ; i < len ; i++){
var value = obj.options[i].value;
options_map[value] = value;
}
}

function getSelectedValue(){
var value =document.getElementById("sel2").value;
alert(value);
}
regInputSelect("sel2");
regInputSelect("input_select1",5);
regInputSelect("input_select2");
</script>
</body>