两种方式生成可输入下拉框。
<html>
<head>
<title>可输入下拉框</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#displayDiv11{
border: 1px solid black;
background-color: white;
display: none;
position: absolute;
z-index: 10;
}
</style>
<script>
window.onload= function(){
buildInputBox("test1",200);
buildInputBox("test2",250);
}
function buildInputBox(obj,width){
var obj_select = document.getElementsByName(obj)[0];
obj_select.onchange=setInputBoxValue;
obj_select.style.width=(18+width)+"px";
obj_select.style.marginLeft = "-"+width+"px";
var parent_obj = obj_select.parentNode;
//删除节点
parent_obj.removeChild(obj_select);
var box = document.createElement("div");
var span = document.createElement("span");
var input = document.createElement("input");
//input.onchange = inputBoxChangeValue;
input.onkeyup = inputBoxFocus;
input.onfocus = inputBoxFocus;
//input.onchange = inputBoxChangeValue;
input.id = 'input_box_name_'+obj;
input.name = 'input_box_element';
box.style.position="relative";
span.style.width="18px";
span.style.overflow="hidden";
span.style.marginLeft = width+"px";
input.style.width = width+"px";
input.style.position ="absolute";
input.style.left="0px";
span.appendChild(obj_select);
box.appendChild(span);
box.appendChild(input);
parent_obj.appendChild(box);
}
function setInputBoxValue(){
//alert(this.selectedIndex);
if(this.selectedIndex>=0){
var input = this.parentNode.nextSibling;
input.value=this.options[this.selectedIndex].text;
}
}
function inputBoxChangeValue(){
//获取下拉框
var select = this.previousSibling.childNodes.item(0);
var optionList = select.options;
var isExist = false;
for(var i=0;i<optionList.length;i++){
var option = optionList[i];
//alert(option.value +" "+ option.text +" "+ this.value);
if(this.value == option.text){
select.value = option.value;
isExist = true;
return;
}
}
if(!isExist){
alert(this.value +" is not exist.");
this.value = "";
//alert(select.value);
}
}
function inputBoxFocus(){
this.select();
var Div = document.createElement('div');
Div.id='displayDiv';
Div.style.border = '1px solid black';
Div.style.backgroundColor = 'white';
Div.style.display = 'none';
Div.style.position = 'absolute';
Div.style.zIndex = '10';
Div.style.height = '100px';
Div.style.overflowX = 'hidden';
Div.style.overflowY = 'auto';
document.body.appendChild(Div);
///alert( this.parentNode.innerHTML);
var displayDiv = document.getElementById('displayDiv');
displayDiv.style.width = (this.offsetWidth+17)+"px";
displayDiv.style.display = "block";
displayDiv.style.top = (this.parentNode.offsetTop + this.offsetHeight)+"px";
displayDiv.style.left = this.parentNode.offsetLeft+"px";
var select = this.previousSibling.childNodes.item(0);
var optionList = select.options;
var content="";
var flag = false;
var input_box_id=this.id;
for(var i=0;i<optionList.length;i++){
var option = optionList[i];
var s = option.text.toLowerCase().indexOf(this.value.toLowerCase());
if(s>=0 || this.value == ""){
content+="<div id='div_item_element' style='font-size: 14px' onmouseout='this.style.backgroundColor="white"' onmousemove='this.style.backgroundColor="blue"'";
content+="onclick='selectDivItem("+option.value+",""+option.text+"",""+input_box_id+"")'"
content+=" style='cursor: pointer;' >";
content+=option.text;
content+="</div>"
flag = true;
}
}
displayDiv.innerHTML=content;
if(!flag){
hiddenDivWin();
}
}
function selectDivItem(value,text,input_box_id){
var input_box = document.getElementById(input_box_id);
var select = input_box.previousSibling.childNodes.item(0);
input_box.value = text;
select.value = value;
//获取下拉框
hiddenDivWin();
}
//任意点击时,如果不是文本框关闭该控件
document.onclick = function(ev)
{
ev = ev || window.event; // 事件
var target = ev.target || ev.srcElement; //
var dragObj = target.getAttribute('name');
if(dragObj == 'div_item_element' || dragObj == 'input_box_element'){
///alert('test1');
}else{
hiddenDivWin();
}
}
//隐藏对话框
function hiddenDivWin(){
var displayDiv = document.getElementById('displayDiv');
if(displayDiv != null){
displayDiv.style.display = "none";
}
}
</script>
</head>
<body>
<div id="div_t" style="padding: 100px; border: 1px solid red; ">
<table border="1">
<tr>
<td>aaaa</td>
<td>
<div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px"
onchange="this.parentNode.nextSibling.value=this.value">
<option value="www.souzz.net">
souzz
</option>
<option value="www.eWebSoft.com">
eWebSoft
</option>
<option value="WEB开发者">
WEB开发者
</option>
</select>
</span>
<input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</td>
</tr>
<tr>
<td>aaaa</td>
<td>
<select name="test1" >
<option value="111">AAA</option>
<option value="222">BBB</option>
<option value="333">CCC</option>
<option value="4444">ABCD</option>
<option value="111">AAA</option>
<option value="222">BBB</option>
<option value="333">CCC</option>
<option value="4444">ABCD</option>
</select>
</td>
</tr>
<tr>
<td>aaaa</td>
<td>
<select name="test2" >
<option value="1">男</option>
<option value="2">女</option>
<option value="0">保密</option>
</select>
</td>
</tr>
<tr>
<td>aaaa</td>
<td>
<select>
<option value="1">男</option>
<option value="2">女</option>
<option value="0">保密</option>
</select>
</td>
</tr>
</table>
</div>
<div id="displayDiv1" ></div>
<div id="1" style=" border: 1px solid red;overflow-y:auto;overflow-x:hidden;width: 200px ;height: 100px ">
</div>
<table border="1" onmouseout="alert('0001')">
<tr onmouseout="this.bgColor='white'" onmousemove="this.bgColor='greent'" >
<td>aaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>
<table border="1" onmouseout="alert('0001')">
<tr onmouseout="this.bgColor='white'" onmousemove="this.bgColor='greent'" >
<td>aaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>
<table border="1" onmouseout="alert('0001')">
<tr onmouseout="this.bgColor='white'" onmousemove="this.bgColor='greent'" >
<td>aaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>
<table border="1" onmouseout="alert('0001')">
<tr onmouseout="this.bgColor='white'" onmousemove="this.bgColor='greent'" >
<td>aaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>
<table border="1" onmouseout="alert('0001')">
<tr onmouseout="this.bgColor='white'" onmousemove="this.bgColor='greent'" >
<td>aaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>
</div>
</body>
</html>
