第一种方法：js动态生成
<html>
<head>
<title> 可编辑下拉框 </title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</head>
<body>
<table border="1" style="border-collapse:collapse ">
<tr>
<td width="300">
<select name=test1>
<option value="可编辑下拉框1" selected>可编辑下拉框1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" value="获取编辑框1的值" onclick="alert(document.getElementById('username').value)">
</td>
<td width="109">
<select name=test2>
<option value="可编辑下拉框2">可编辑下拉框25555555</option>
<option value="1">4</option>
<option value="2" selected>5</option>
<option value="3">6</option>
</select>
</td>
<td width="343">
<input type="button" value="获取编辑框2的值" onclick="alert(document.getElementById('password').value)">
</td>
</tr>
</table>
<script language="javascript">
var a=new combox("username","test1");
//参数1为新生成输入框的名称
//参数2为原来的select对象名称
a.init(a);
var b=new combox("password","test2");
b.init(b);
function combox(_inpuObjName,_controlSelectName) {
this.inpuObjName=_inpuObjName;//生成的输入框对象名称
this.inputbox=null;//生成的输入框对象
this.controlSelect=document.getElementById(_controlSelectName);//原来的下拉框对象
//初始化对象
//_comboxObj:combox对象，须指向自己
this.init=function(_comboxObj) {
this.inputbox=document.createElement("input");
this.inputbox.id=this.inpuObjName;
this.inputbox.comboxObj=_comboxObj;
this.inputbox.onchange=function() {
this.comboxObj.find();
}
with(this.inputbox.style) {
width=this.controlSelect.offsetWidth-16;
height=this.controlSelect.offsetHeight;
}
this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox);
_span=document.createElement("span");
_span.style.width=18;
this.controlSelect.insertAdjacentElement("beforeBegin",_span);
_span.appendChild(this.controlSelect);
_container=document.createElement("span");
this.inputbox.insertAdjacentElement("beforeBegin",_container);
_container.appendChild(this.inputbox);
_container.appendChild(_span);
_container.style.width=this.inputbox.offsetWidth+18;
_width=this.controlSelect.offsetWidth-18;
with (this.controlSelect.style) {
margin="0 0 0 -"+_width;
}
this.controlSelect.comboxObj=_comboxObj;
this.controlSelect.onchange=function() {
this.comboxObj.change();
}
this.change();
}
//当搜索到输入框的值时,下拉框自动定位/
this.find=function() {
with (this.controlSelect) {
for(i=0;i<options.length;i++)
if(options[i].text.indexOf(this.inputbox.value)==0) {
selectedIndex=i;
this.change();
break;
}
}
}
//定义下拉框的onchange事件
this.change=function() {
this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text;
with (this.inputbox) {
select();
focus();
}
}
}
/**
* 定位函数，获取控件绝对坐标
*/
function getLeftPos(e) {
var left=e.offsetLeft;
while (e=e.offsetParent) {
left+=e.offsetLeft;
}
return left;
}
function getTopPos(e) {
var top=e.offsetTop;
while (e=e.offsetParent) {
top+=e.offsetTop;
}
return top;
}
</script>
</BODY>
</HTML>
第二种方法：样式设置
<html>
<head>
<title> 可编辑下拉框2 </title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</head>
<body>
<table border="1" style="border-collapse:collapse ">
<tr>
<td>
<div style="position:relative;">
<span id="spanfindvalue1" style="margin-left:200px;width:18px;overflow:hidden;">
<select id="selectfindvalue1" class="text" style="width:218px;margin-left:-200px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="可编辑下拉框" selected>可编辑下拉框</option>
<option value="456">456</option>
<option value="123">123</option>
<option value="456">456</option>
</select>
</span><input name="findValue" id="findValue1" class="text" style="width:200px;position:absolute;left:0px;" onclick="">
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
分享到：
相关推荐
而可编辑下拉框则突破这一限制，允许用户在输入框中直接输入，同时保持下拉列表功能，以便用户在输入时能够匹配并选择合适的预定义选项。 ### 2. JavaScript基础 JavaScript是实现此类交互的关键，它是一种动态、...
"Android 自定义可编辑下拉框"是一个常见的需求，特别是在创建表单或者需要用户输入并选择特定值时。本教程将深入探讨如何实现这样一个功能，并提供已优化的代码和界面设计。 首先，我们来理解下拉框（Spinner）的...
可编辑下拉框，用javascript 实现
参考别人文献 同时结合实际修改部分代码做出的一个可编辑的下拉框，并且修改过程同时会动态把没有的选项加入到下拉框中
本示例中，我们探讨的主题是如何创建一个“可编辑下拉框”，它具备筛选、过滤和搜索功能，适用于选择国家等场景。这样的组件可以极大地提升用户体验，让用户能够更高效地找到他们需要的信息。 “可编辑下拉框”通常...
在IT领域，尤其是在前端开发中，"可编辑下拉框 可以自动匹配"是一种常见的交互元素设计，它结合了输入框与下拉选择框的功能，提供了用户友好的数据筛选和输入体验。这种控件通常被称为`edSelect`，正如标签所示。...
为了解决这个问题，"可编辑下拉框"（Editable DropDownList）应运而生，它结合了下拉选择和自由输入的特性，为用户提供了更大的灵活性。 ASP.NET中的Editable DropDownList控件通常通过自定义或者第三方库实现，如...
在IT界，"可编辑下拉框"是一种常见的用户界面元素，它结合了传统下拉框和文本输入框的功能，允许用户既可以从中选择预设的选项，也可以自行输入新的值。这种控件在各种应用程序和网页设计中都有广泛应用，提高了用户...
在Android开发中，创建一个仿QQ登录的可编辑下拉框是一种常见的需求，它结合了EditText的文本输入功能和Spinner的下拉选择功能，同时提供了更友好的用户交互体验。本示例将通过使用EdiText、PopupWindow、ListView和...
"Jquery可编辑下拉框控件"是一种基于jQuery的组件，它提供了更丰富的用户交互体验，允许用户在下拉框中进行编辑，不仅可以选择已有选项，还能输入自定义内容。这样的控件对于数据录入或搜索场景特别有用，因为它结合...
HTML中的可编辑下拉框是一种交互式用户界面元素，它结合了传统下拉框的简洁性和文本输入框的灵活性。这种功能通常用于提供用户输入建议或自动补全，提高用户体验和数据输入效率。在本话题中，我们将深入探讨如何利用...
标题中的“可编辑下拉框 支持常用浏览器”指的是在网页开发中，实现一个具有编辑功能的下拉框（Dropdown）控件，并且这个控件能在主流的浏览器上正常工作，如Chrome、Firefox、Safari和Edge等。在Web应用中，下拉框...
在网页开发中，传统的下拉框（Dropdown List）通常是静态的，用户只能从中选择已预设的选项，而无法直接...通过熟练掌握JavaScript和DOM操作，开发者可以创建功能强大且易用的可编辑下拉框，提升网站或应用的用户体验。
#### 一、可编辑下拉框的概念与应用场景 - **概念**：可编辑下拉框是指允许用户不仅可以选择预设的选项，还可以直接在下拉框内输入新值的一种交互方式。 - **应用场景**： - 数据录入系统：允许用户在没有完全匹配...
在Android开发中，创建一个仿QQ登录的可编辑下拉框是一项常见的需求，它不仅可以提供用户友好的界面，还能提高应用的用户体验。本教程将详细讲解如何实现这样一个功能，并通过源代码实例帮助开发者深入理解其工作...
主要以EdiText、PopupWindow、ListView及Adapter来实现下拉效果，源码，如果没有资源分可以直接访问http://blog.csdn.net/zw_yuyan/article/details/7734736 完整的代码文档，或者我的bd文库...