转自：http://sinian1120na.blog.163.com/blog/static/245805082009766015820/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>可编辑的下拉框</title>
<style type="text/css">
.combobx {width:100px;overflow:hidden;position:relative;padding:0;display:inline;}
.combobx input {width:80px;position:absolute;left:0;top:0;}
.combobx select {width:100px;position:absolute;left:0;top:0;clip:rect(auto auto auto 82px);}
</style>
</head>
<body>
<form method="post" action="#">
学历:
<div class="combobx"><input id="txtSelectValue" type="text" name="xxx" onblur="editOption();" />
<select id="selectDemo" onchange="changeOption();">
<option value="xiaoXue">小学</option>
<option value="zhongXue">中学</option>
<option value="daXue">大学</option>
</select>
</div>
<input type="hidden" id="hiddenIndex" value="" />
<script type="text/javascript">
var selectObj = document.getElementById("selectDemo");
var hiddenObj = document.getElementById("hiddenIndex");
// 切换下拉框选项时的操作
function changeOption() {
// 将当前选中的下拉框选项文本赋值给TxtBox
document.getElementById("txtSelectValue").value = selectObj.options[selectObj.selectedIndex].innerHTML;
// 保存当前所选下拉框选项的索引
hiddenObj.value = selectObj.selectedIndex;
}
// 修改下拉框选项值时的操作
function editOption() {
var txtObj = document.getElementById("txtSelectValue");
// 验证编辑后的文本
if (txtObj.value != "") {
// 更改下拉框选项的文本
selectObj.options[hiddenObj.value].innerHTML = txtObj.value;
// 更改下拉框选项的Value
// selectObj.options[hiddenObj.value].value = txtObj.value;
} else {
alert("请填写有效的学历!");
}
}
window.onload = function() {
// 首次加载页面时给input value赋值
document.getElementById("txtSelectValue").value = selectObj.options[selectObj.selectedIndex].innerHTML;
hiddenObj.value = selectObj.selectedIndex;
}
</script>
</form>
</body>
</html>
分享到：
相关推荐
combox实现的可编辑下拉框 可编辑下拉框，其实就是在下拉框的上面放了个无边框的输入框，在输入框输数据时，下拉框自动定位,下拉框选中某项时，下拉框的值赋给输入框，从而产生错觉
Android 自定义 可编辑 下拉框 已优化代码和界面
这是一个自定义的可编辑下拉框 可输入可选择 内附使用文档 非常的简单 代码也是反复测试过的
可编辑下拉框，用javascript 实现
参考别人文献 同时结合实际修改部分代码做出的一个可编辑的下拉框，并且修改过程同时会动态把没有的选项加入到下拉框中
Android实现仿QQ登录可编辑下拉框
可编辑下拉框
Jquery可编辑下拉框控件,web开发非常实用，有多个功能设置
主要以EdiText、PopupWindow、ListView及Adapter来实现下拉效果，源码，如果没有资源分可以直接访问http://blog.csdn.net/zw_yuyan/article/details/7734736 完整的代码文档，或者我的bd文库...
也就是说，将仿Goole、百度搜索下拉提示功能及可编辑下拉框功能组合到一起，两个功能均在网上找的，根据实际情况，修改了一些代码，使得控件元素的定位更灵活，更准。存html编码，使用非常方便。 需要注意的是，页面...
现在可以编辑下拉框,可根据输入的内容重新加载下拉框的内容.令客户选择查找起来更方便. 使用方法.将此js复制到项目中.在用到需要编辑下拉框的jsp界面中引用此js.在body 属性里. 调用onload事件. ();"> 测试方法:点击...
可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的
Android实现仿QQ登录可编辑下拉框，可用于做登陆的记住账号
jQuery Editable Select 是一个jQuery插件，它将选择转换成输入字段，其中根据输入的字符实时显示单个元素。当JavaScript不可用时，它就变成了一个真正的选择列表。
bootstrap-table插件：bootstrap-editable,可编辑下拉框，以及代码实例,
业务需要，需要一个选择国家的下拉框，国家比较多，要实现可编辑，可过滤，可搜索功能。 网上搜索发现有一个插件可以基本实现我的功能，但不完美，所以又进行了一番改造；压缩包里有插件代码及一个小demo
可编辑的下拉可编辑的下拉框(JavaScript)框(JavaScript)
这个是可编辑的下拉列表框，可以自动匹配。