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 编程引入命名空间的方法与代码
Aug 13 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
详解JavaScript树结构
Jan 09 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
文章推荐系统(二)
2006/10/09 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
js操作二进制数据方法
2018/03/03 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
详解python的argpare和click模块小结
2019/03/31 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
光声世纪笔试题目
2012/08/25 面试题
婚礼答谢宴主持词
2014/03/14 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL