<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>
分享到：
相关推荐
HTML中的可编辑下拉框是一种交互式用户界面元素，它结合了传统下拉框的简洁性和文本输入框的灵活性。这种功能通常用于提供用户输入建议或自动补全，提高用户体验和数据输入效率。在本话题中，我们将深入探讨如何利用...
"可编辑的列表，和下拉框结合使用"这一主题，涉及到了一个特定的UI控件技术，它将列表框（ListBox）和下拉框（ComboBox）的功能巧妙地结合在一起，提供了一种高效且直观的数据输入和选择方式。 列表框（ListBox）...
在FineReport中，下拉框控件是一种常见的参数输入方式，用户可以通过选择列表中的选项来过滤或查询数据。多级联动则意味着当用户在一个下拉框中做出选择时，其他关联的下拉框会根据这个选择自动更新其选项，从而实现...
在IT领域，时间选择的下拉框是一种常见的用户界面组件，它允许用户通过下拉菜单选取特定的时间值，如小时、分钟甚至日期。这样的组件在网页设计、移动应用开发以及桌面软件中都有广泛的应用，提高了用户输入时间的...
创建日历下拉框通常有两种方法：一种是使用HTML `<select>` 标签创建多级下拉菜单，另一种是使用JavaScript或jQuery库创建更复杂的日历组件。由于描述中提到代码主要写在JavaScript中，我们将重点介绍后者。 1. **...
综上所述，"三级联动下拉框实现"涉及前端开发中的交互设计、DOM操作、事件处理和数据管理等多个方面，是网页开发中不可或缺的一种技术。通过`test.html`文件，我们可以深入理解这一技术的具体实现细节，并学习如何在...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在这个案例中，JSON文件（如`wpf_Json_Address.json`）通常包含我国所有省份、城市和区县的层次结构...
15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...
15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...
默认提供asp、aspx两种代码框架及多个界面设计模板，均可任意修改管理。通过自定义生成程序的界面风格与输出代码，用户可将其扩展为ASPX/ASP/PHP/JSP等各种程序的代码生成器。内置的.net代码框架，能建立C#语言的...
在网页设计中，"下拉框年月日3级联动"是一种常见的交互方式，它用于让用户方便地选择日期。这种设计通常由三个下拉框组成，分别代表年、月和日，用户依次从每个下拉框中选择，形成完整的日期。这种联动效果使得用户...
总之，使用jQuery插件实现可输入和自动匹配的下拉框是一种有效的方法，可以大大提升Web应用的用户体验。虽然不同的插件有着不同的优缺点，但是通过细致的配置和样式调整，总能找到最适合项目需求的解决方案。
2. **多选与单选**：这个控件提供了Checkbox和Radio两种选择方式。Checkbox允许用户同时选择多个选项，适用于需要多项勾选的场景；Radio则限制用户只能选择一个，适用于互斥选项的情况。 3. **根据数据源动态生成**...
15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...
在Django中实现下拉框通常有两种方法，一种是直接使用ChoiceField，另一种是使用ModelChoiceField。ChoiceField允许你定义一个选项列表，用户可以从这些选项中选择。ModelChoiceField则是结合了模型的数据，用户的...
15、支持表头/单独表格搜索两种布局方式 16、提供多种灵活翻页方案，用户可设置每页记录条数、上/下页、前/后N页、输入数字跳转到指定页面等，提高海量数据翻页速度 17、提供丰富的建站常用VB、JS函数库 ★ 18、更多...
4. **筛选逻辑的实现**: 文章中讨论了两种筛选逻辑：一种是通过隐藏不匹配的项，另一种则是每次都从数据源中匹配并重新生成节点。作者最终选择了后者，原因在于其方便性和简洁性。 5. **正则表达式解析器**：为了从...
省市联动下拉框是网页设计或应用程序中常见的一种交互元素，它通常用于用户选择地理位置时，省份选择后，对应的市区会动态更新显示。这种联动效果能够简化用户输入，提高用户体验。下面将详细介绍省市联动的基本原理...