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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
javascript每日必学之运算符
Feb 16 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
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 n个不重复的随机数生成代码
2009/06/23 PHP
PHP 简单日历实现代码
2009/10/28 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP7常量数组用法分析
2016/09/26 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python开启debug模式的方法
2019/06/27 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
医学生自荐信范文
2013/12/03 职场文书
2014植树节活动总结
2014/03/11 职场文书
义和团口号
2014/06/17 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
项目安全员岗位职责
2015/02/15 职场文书
运动会开幕式致辞
2015/07/29 职场文书