转自：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>
分享到：
相关推荐
而可编辑下拉框则突破这一限制，允许用户在输入框中直接输入，同时保持下拉列表功能，以便用户在输入时能够匹配并选择合适的预定义选项。 ### 2. JavaScript基础 JavaScript是实现此类交互的关键，它是一种动态、...
"可编辑下拉框"是一种交互式的UI组件，它结合了传统的下拉选择框与文本输入框的功能，允许用户既可以从中选择预设的选项，也可以自行输入新的内容。这种设计提高了用户体验，特别是当用户需要输入的数据可能不在预设...
"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文库...