<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可输入的select</title>
<style>
.optionForSel {font-size:9pt}
</style>
</head>
<body leftmargin="50" topmargin="50">
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td id="selectLength" width="100%" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;">
<div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
</td>
<td width="20" style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt">
<img src="images/button2.gif" border="0" id="mm" onclick="mm_Click()" align="absmiddle" width="18" height="18">
</td>
</tr>
</table>
<div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:10">
<table width="100%" cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White">
<tr>
<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''" onclick="document.all.selectedValue.innerText=this.innerText">
Visit1
</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''" onclick="document.all.selectedValue.innerText=this.innerText">
Visit2
</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''" onclick="document.all.selectedValue.innerText=this.innerText">
Visit3
</td>
</tr>
</table>
</div>
<script>
function mm_Click(){
if (document.all.dropdownOption.style.visibility == 'visible')
document.all.dropdownOption.style.visibility = 'hidden'
else
document.all.dropdownOption.style.visibility = 'visible'
}
function init(){
document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22;
document.all.selectedValue.contentEditable = true;
var strTop = 0;
var strLeft = 0;
var e1 = document.all.selectLength;
while(e1.tagName != "BODY"){
strTop += e1.offsetTop
strLeft += e1.offsetLeft
e1 = e1.offsetParent
}
document.all.dropdownOption.style.top = String(strTop + 24) + "px";
document.all.dropdownOption.style.left = String(strLeft) + "px";
}
function clickE(){
if(window.event.srcElement.id !='mm')
document.all.dropdownOption.style.visibility = 'hidden';
}
document.onclick = clickE
window.onload = init
</script>
<br>
<br>
<input type="button" value="得到选中的值" onclick="alert(document.all.selectedValue.innerText)">
</body>
</html>
分享到：
相关推荐
- **JavaScript库插件**：许多前端框架和库如jQuery、Vue.js、React等都有专门的可编辑Select插件，如Select2、react-select等，它们提供了丰富的API和配置选项，便于集成到项目中。 - **CSS和JavaScript自定义**：...
网页自带select 不支持编辑输入功能,所以自己做了一个.net 版服务器控件，方便实用。 并加入了类似百度一样的搜索提示功能。
### 可编辑Select下拉框实现方法 #### 一、引言 在现代Web开发中，用户界面（UI）的设计对于提升用户体验至关重要。一个常见的需求是实现一个可编辑的`<select>`下拉框，即允许用户不仅能从下拉列表中选择选项，还...
"实现可编辑的select" 就是这样一种解决方案，它允许用户不仅可以选择已有选项，还能直接输入新的选项并保存。 在提供的压缩包文件中，包含了两个JavaScript文件：`jquery.editable-select.min.js` 和 `jquery....
为了实现一个既可输入又可编辑的下拉框效果，开发者通常会采用一些技巧来模拟这种行为。这里，我们将深入探讨如何通过HTML、CSS和JavaScript技术来实现这样一个功能。 首先，我们创建一个基础的HTML结构，包括一个`...
### 实现 Select 下拉选项可编辑 在网页开发过程中，我们经常会遇到需要用户进行选择的情况。传统的`<select>`元素可以很好地完成这项任务，但是它存在一个限制：用户只能从预定义的选项中进行选择而不能自定义输入...
`jQuery Editable Select`就是这样一个插件，它允许用户在下拉框中直接编辑输入，同时根据输入的内容实时过滤选项，提高了用户在大量数据中的查找效率。 `jQuery Editable Select`插件的工作原理是将标准的`<select...
select2.min.js
在网页设计中，"select下拉框可编辑输入框"是一种常见的交互元素，它结合了传统的HTML `<select>` 元素和输入框的功能，让用户在下拉选项中选择的同时，也能自由输入其他值。这样的设计增加了用户体验的灵活性，特别...
【editableSelect可编辑搜索的下拉框插件】 在网页设计和开发中，用户界面的交互性和用户体验至关重要。为了提供更高效、更便捷的输入方式，`editableSelect`插件应运而生。这款插件是一款针对下拉选择框进行增强的...
1. **可编辑SELECT**：在默认情况下，`SELECT`控件是只读的，用户只能从中选择已有的选项。但通过扩展，我们可以允许用户直接在下拉框内输入新的值，这在需要用户自由输入的场景中非常有用。 2. **自定义列数**：在...
本知识点主要探讨的是“现实ComboBox”，即一个具有自动提示功能的可编辑Select选择框。 这个特定的ComboBox实现可能包括以下关键特性： 1. **可编辑性**：用户不仅可以从下拉列表中选择一个选项，还可以直接在...
标题中的“可编辑并自动提示的select控件”指的是在Web开发中，使用特定的JavaScript库或组件，创建一种能够动态提示选项，并且允许用户编辑输入的下拉选择框（Select）控件。这种控件通常用于提高用户体验，让用户...
下拉框选择已有固定value，也可以选择后进行编辑，也可以直接输入数值。
"可选择可输入的select"就是一种改进的下拉菜单实现，它允许用户在下拉选项中选择，同时也能自由输入新的值。这种功能在许多场合非常实用，例如当用户可能需要输入未在预定义选项中的数据时。 这个博客文章...
为了使得下拉框在外观上看起来与可编辑状态没有区别，但用户的实际选择行为被忽略，可以在select元素中使用onfocus和onchange事件。具体实现方式如下： - onfocus事件设置下拉框的当前选择索引为默认值； - onchange...
可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的
select id=”name” name=”name” onkeydown=”clearSelect(this,event);” onkeypress=”writeSelect(this,event);” style=”width:70px;”> ””></option> ”test1″>test1</option> ”test2″>test2...
这将使所有的`<select>`元素变得可编辑。若想针对特定的`<select>`应用插件，只需更改选择器即可。 `新建文本文档.txt`可能是插件的使用说明或示例代码，但因格式限制，我们无法在此查看具体内容。通常，官方文档或...