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实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
js中url对象化管理分析
Dec 29 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
详解js加减乘除精确计算
Mar 19 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JS实现放大镜效果
Sep 21 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
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
linux下php上传文件注意事项
2016/06/11 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python列表(List)知识点总结
2019/02/18 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
项目开发计划书
2014/01/09 职场文书
绿色学校实施方案
2014/03/31 职场文书
教师工作失职检讨书
2014/09/18 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
九年级英语教学反思
2016/02/15 职场文书
中学语文教学反思
2016/02/16 职场文书
python munch库的使用解析
2021/05/25 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL