当前位置:首页 > 开发 > Web前端 > 前端 > 正文

两种方式生成可输入下拉框。

发表于: 2010-12-18   作者:362217990   来源:转载   浏览:
Web
摘要: <html> <head> <title>可输入下拉框</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description&
<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>

两种方式生成可输入下拉框。

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<html> <head> <title>ComboBox Demo</title> <style type="text/css"&
<html> <head> <title>ComboBox Demo</title> <style type="text/css"&
效果如下: JSP页面代码: 注意事项: 依赖 jquery name="supplierCode" textName="supplierName" ,
先看效果 功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,
以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了。现在我们来看看在MVC中DropDow
一般可输入的下拉框都需要模拟,比较繁琐,这里给出一个简单的Demo展现不需要模拟的可输入下拉框。
如果实现形如: 的jquery的自动提示下拉框效果可以采用jquery的插件:FlexBox 下面对我的一点应用心
如果实现形如: 的jquery的自动提示下拉框效果可以采用jquery的插件:FlexBox 下面对我的一点应用心
Refer : http://blog.csdn.net/ms03001620/article/details/8490314 一、eclipse 中生成android key
一、eclipse 中生成android keystore 建立任意一个android项目(例如:AntForAndroid) 右键AntForAn
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号