js实现Select下拉框具有输入功能的方法


Posted in Javascript onFebruary 06, 2015

本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下:

实现方法一

<HTML>

<HEAD>

<META http-equiv='Content-Type' content='text/html; charset=gb2312'>

<TITLE>js实现可输入的下拉框</TITLE>

</HEAD>

<BODY>

<div style="position:relative;">

<span style="margin-left:100px;width:18px;overflow:hidden;">

<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">

<option value="德国">德国</option>

<option value="挪威">挪威</option>

<option value="瑞士"> 瑞士</option>

</select></span><input name="box" style="width:100px;position:absolute;left:0px;">

</div>

</BODY>

</HTML>

实现方式二

<select id="select" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">

<option value=""></option>

<option value="aaa">aaa</option>

<option value="bbb">bbb</option>

<option value="ccc">ccc</option>

</select>

<input type="button" value="获取选择值" id="test" onclick="test();"/>

<script>

var Select = {

del : function(obj,e){

if((e.keyCode||e.which||e.charCode) == 8){

var opt = obj.options[0];

opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);

}

},

write : function(obj,e){

if((e.keyCode||e.which||e.charCode) == 8)return ;

var opt = obj.options[0];

opt.selected = "selected";

opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);

}

}

function test(){

alert(document.getElementById("select").value);

}

</script><br />

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
HTML的select控件美化
Mar 27 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
JQuery中serialize()用法实例分析
Feb 06 #Javascript
jQuery中on()方法用法实例详解
Feb 06 #Javascript
JS实现文字向下滚动完整实例
Feb 06 #Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
python的id()函数解密过程
2012/12/25 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python使用pymysql小技巧
2017/06/04 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
应届大学生的推荐信
2013/11/20 职场文书
优秀经理事迹材料
2014/02/01 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
离婚协议书范文2014
2014/10/16 职场文书
员工考勤管理制度
2015/08/06 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Oracle11g R2 安装教程完整版
2021/06/04 Oracle