`
362217990
  • 浏览: 50585 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

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

Web 
阅读更多
<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>
分享到：
| 最新+最简单Oracle分页查询法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    风越.net代码生成器 v3.5

    15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...

    风越asp代码生成器 V3.5

    15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...

    风越.Net代码生成器 [FireCode Creator] V1.3 精简版

    默认提供asp、aspx两种代码框架及多个界面设计模板，均可任意修改管理。通过自定义生成程序的界面风格与输出代码，用户可将其扩展为ASPX/ASP/PHP/JSP等各种程序的代码生成器。内置的.net代码框架，能建立C#语言的...

    风越ASP代码生成器2.8

    15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...

    风越ASP代码生成器FireAspCreatorv2.9.rar

    15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...

    风越ASP代码生成器 2.4

    15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...

    风越.net代码生成器v2.9

    15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...

    中小学简易成绩管理系统(excel)

    其中，分班成绩册和成绩单、统计分别以VBA和公式两种方式制作，这两种方式各有特点，供你选择：公式方式的优点是当条件变化（如所选班级、科目变化）时显示结果随之实时变化，除非公式被破坏或者刚从其它表册转入本...

    数据关联输入拼音过滤控件 DataHint

    一般这种情况有两种解决办法，一种是用下拉列表框提供输入的选择，这种方法有很大的缺点：需要用户点击鼠标，弹出下拉框选择输入，比较麻烦；另外如果数据较多，用户选择数据的时间要超过了输入的时间，反而降低了...

    中小学简易成绩分析系统

    其中，分班成绩册和成绩单、统计分别以VBA和公式两种方式制作，这两种方式各有特点，供你选择：公式方式的优点是当条件变化（如所选班级、科目变化）时显示结果随之实时变化，除非公式被破坏或者刚从其它表册转入本...

    决策信息系统(有运畴学、工程经济学等内容) VB+SQL

    ②追加功能：分两种追加方式，其一是新建一个投资项目，其二是在原有项目的基础上新建一个备选方案，点击“追加”按钮，在文本框中输入相应信息，再点击“生成”便可完成数据追加；注意项目编号、方案编码不可编辑，...

    无忧代课破解

    1 可按课务查老师与按老师（拼音首字母）查课务两种方法选取所要代课的班级老师课务； 2 能自动找出当天某位老师的课务情况，并查出相应的空课老师（全校空与班级空）； 3 通过下拉框选取想要代课的老师，加入打印...

    configForm：根据配置生成表单

    选项选项（数组|| “”可以是文本和字符串两种类型）目前只支持拖放框 OptionGroup选项组（根据选择展示不同的子集） OptionLabel选项显示的Label（默认名称）目前只支持拖动框 OptionValue选项保存的值（默认值）...

    无忧代课系统 中小学排代课

    1 可按课务查老师与按老师（拼音首字母）查课务两种方法选取所要代课的班级老师课务； 2 能自动找出当天某位老师的课务情况，并查出相应的空课老师（全校空与班级空）； 3 通过下拉框选取想要代课的老师，加入打印...

    多媒体教室

    学生机在接收屏幕广播时，如果教师未锁定学生机键盘鼠标，学生就可以用窗口方式接收广播（窗口可设置为智能滚动、自由滚动、缩放显示），该功能的详细说明请参见?窗口显示模式?。此时学生可在接收屏幕广播的同时进行...

    史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用，含全部源代码)

    年月时分秒输入框都具备以下3个属性:通过导航图标选择,直接使用键盘输入数字,直接从弹出的下拉框中选择.因此不管你选择什么样的日期和时间都可以找到一种最快捷的方法,用最少的鼠标点击来搞定 自动纠错功能 纠错...

    Qt Creator 的安装和hello world 程序+其他程序的编写--不是一般的好

    7.添加资源有两种方法。一种是直接添加系统提供的资源文件，然后选择所需图 标。另一种是自己写资源文件。我们主要介绍第一种。新建Qt Resources file， 将它命名为menu。其他默认。 8.添加完后如下图。可以看到添加...

    asp.net知识库

    在ASP.Net中两种利用CSS实现多界面的方法 如何在客户端调用服务端代码 页面一postback，它就显示页面的最顶端，怎样让它定位在某一位置？ 如何保证页面刷新后的滚动条位置 清除网页历史记录，屏蔽后退按钮! 如何传值...

Magicbox
Global site tag (gtag.js) - Google Analytics