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----文件操作
Jan 18 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
RequireJS使用注意细节
May 15 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
JS实现li标签的删除
Apr 12 Javascript
JS script脚本中async和defer区别详解
Jun 24 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP6新特性分析
2016/03/03 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
javascript每日必学之多态
2016/02/23 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
javascript表单正则应用
2017/02/04 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python中那些 Pythonic的写法详解
2019/07/02 Python
python 默认参数相关知识详解
2019/09/18 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
python3 kubernetes api的使用示例
2021/01/12 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
英语简历自我评价
2014/01/26 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
合伙经营协议书范本
2014/09/13 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python