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 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php一些公用函数的集合
2008/03/27 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python flask框架post接口调用示例
2019/07/03 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python内置模块collections知识点总结
2019/12/19 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
高二物理教学反思
2014/02/08 职场文书
双创工作实施方案
2014/03/26 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
生物工程专业求职信
2014/09/03 职场文书
护士年终考核评语
2014/12/31 职场文书
厉行节约工作总结
2015/08/12 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript