做项目的时候遇到一个需求，允许一个下拉列表即可以选择，也可以输入。
在网上找到一个实现方法，很不错，可以有很多扩展，现在分享一下。
实现如下:
<html>
<head>
<title>可以编辑的下拉列表
<script language="JavaScript">
<!--
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13:
//Enter;
sel.options[sel.length] = new Option("","",false,true);
event.returnValue = false;
break;
case 27:
//Esc;
alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";");
event.returnValue = false;
break;
case 46:
//Delete;
if(confirm("删除当前选项!?"))
{
sel.options[sel.selectedIndex] = null;
if(sel.length>0)
{
sel.options[0].selected = true;
}
}
event.returnValue = false;
break;
case 8:
//Back Space;
var s = sel.options[sel.selectedIndex].text;
sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);
event.returnValue = false;
break;
}
}
function catch_press(sel)
{
sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
event.returnValue = false;
}
//-->
</script>
</head>
<body onload="s1.focus();">
<h3>操作方法:</h3>
<p>
1.按Enter键开始添加输入新的选项...<br>
2.按Del键删除当前选项...<br>
3.按Esc键查看当前选项的text和value值...<br>
4.按BackSpace键删除当前选项的前一个字符...<br>
</p>
<h3>测试结果:</h3>
<p>
1.IE6.0测试通过...<br>
</p>
<br>
<h3>建议&意见:</h3>
<p>
1.大家可以做成htc,将这些函数绑在css上(很简单,不再介绍...)...<br>
</p>
<h3>示例:</h3>
<p>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
</p>
</body>
</html>
分享到：
相关推荐
JavaScript，简称JS，是一种广泛用于网页和网络应用的编程...以上就是JS学习笔记中的主要内容，这些知识点覆盖了JS在网页开发中的基础和高级应用，对于任何想要深入学习和掌握JavaScript的人来说，都是宝贵的学习资源。
### JavaScript学习笔记知识点详解 #### 一、JavaScript基础语法与文档对象模型（DOM） 1. **输出语句**: `document.write("")` 是一种常见的在HTML文档中输出文本的方法。但通常建议使用更现代的方法，如修改DOM...
最后，`js`目录下的文件是插件的核心部分，其中的JavaScript代码实现了输入框与下拉列表树的交互逻辑。jQuery库提供了丰富的DOM操作和事件处理方法，使得实现这样的功能变得简单。主要步骤可能包括： 1. 监听输入框...
`<label>`为输入字段提供描述，`<select>`和`<option>`用于创建下拉列表，`<textarea>`定义多行文本输入。 15. ` `：换行标签，用于在文本中插入一个换行符。 16. `<hr>`：水平线标签，用于在页面上添加一条...
例如，你可以用JavaScript来实现当用户点击按钮时显示一个警告对话框，或者在用户输入内容时实时验证其有效性。 HTML中的基本标签包括注释标签`<!-- -->`，标题标签如`<h1>`到`<h6>`，用于文本格式化的标签如`<b>`...
- **`<select>`**：下拉列表框。 - **`<option>`**：列表项。 - **多媒体** - **`<embed>`**：嵌入多媒体文件（如 Flash、音频或视频）。 - **`<bgsound>`**：为页面添加背景音乐。 - **`...
### HTML5学习笔记知识点梳理 #### 一、HTML5简介及特点 - **定义**: HTML5是HTML（HyperText Markup Language）的最新版本，由万维网联盟（W3C）于2014年10月正式发布。它不仅继承了HTML的基本特性，还新增了许多...
### JS学习笔记知识点详解 #### 一、基本概念与语法 **1. 输出语句** `document.write("");` 是一种将文本直接输出到HTML文档的方法。这通常用于简单的测试场景，但在实际开发中不建议使用，因为它会覆盖整个...
根据提供的文件内容，我们可以整理出一系列关于JavaScript的基础知识点与实用操作方法。以下是对这些知识点的详细解释： ### 1. `document.write("")` `document.write` 是一个在文档流中写入HTML的方法。通常用于...
【VC#学习笔记仅供参考】 本笔记主要涵盖了ASP.NET应用程序的开发知识，特别是针对网页设计和数据库访问技术。在学习过程中，我们将逐步了解如何构建信息浏览页面，并深入探讨各种Web服务器控件的使用。 首先，...
HTML的`<form>`元素用于创建用户输入表单，`<input>`元素可以设置不同类型（如文本、密码、复选框、单选按钮等），`<button>`提交或重置表单，`<label>`关联输入字段，`<select>`和`<option>`用于下拉菜单，`...
### Web前端基础学习笔记 #### 一、HTML ##### 1. HTML简介 - **网站与网页**: 网页是使用HTML标记语言编写的文件，用于描述同一范畴内的信息或数据。多个网页组成一个网站。 - **HTML**: 超文本标记语言，是一种...
`<FORM>`用于创建表单，`<TEXTAREA>`和`<INPUT>`则定义输入字段，`<SELECT>`创建下拉菜单，`<OPTION>`定义选项。 图像通过`<IMG>`标签插入，链接用`<A>`标签实现，`<BASE>`可以设置基础URL。框架技术包括`...
### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架，它基于HTML、CSS及JavaScript构建，旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局，...
- `<select>`和`<option>`用于创建下拉列表。 6. HTML5新特性 - 新增的语义化标签，如`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<footer>`，帮助提高网页可读性和可访问性。 - `<canvas>`元素...
本学习笔记旨在详细介绍HTML的基本概念、常用标签及其英文单词解释，帮助初学者更好地理解和运用HTML。 一、HTML基本结构 HTML文档通常以`<!DOCTYPE html>`开头，声明当前文档为HTML5标准。接着是`<html>`标签，它...
2. **AutoComplete**：提供自动补全功能，常用于搜索框，根据用户输入动态更新下拉列表。 3. **RemoteObject**：提供对服务器端Java对象的透明访问，使得JavaScript可以直接调用Java方法。 4. **Batching**：支持...
### LotusDomino学习笔记知识点概览 #### 1. 选取视图的列的内容 (@Trim @DbColumn) - **@Trim**: 是一个内置的LotusScript函数，用于去除字符串两端的空白字符。 - **@DbColumn**: 此函数用于获取指定列的信息。...
下拉列表的选项值可以通过`options[n].value`获取。 字符串方法还包括`toUpperCase()`和`toLowerCase()`用于大小写转换，`indexOf()`检测子字符串位置，`charAt()`获取指定索引处的字符，以及`substring()`截取子...
### HTML学习笔记知识点详解 #### 一、基本标签与功能介绍 HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。以下是一些常见的HTML标签及其功能： 1. **标题标签**：`<h1>`至`<h6>`，其中`...