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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
php自动适应范围的分页代码
2008/08/05 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
countUp.js实现数字滚动效果
2019/10/18 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python学习 流程控制语句详解
2016/06/01 Python
Django自定义认证方式用法示例
2017/06/23 Python
python实现微信远程控制电脑
2018/02/22 Python
python:print格式化输出到文件的实例
2018/05/14 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python 重命名轴索引的方法
2018/11/10 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python创建文本文件的简单方法
2020/08/30 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
一个C/C++编程面试题
2013/11/10 面试题
国庆节文艺活动方案
2014/02/03 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
拾金不昧感谢信
2015/01/21 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
python数字类型和占位符详情
2022/03/13 Python
Python Flask实现进度条
2022/05/11 Python