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对象的函数
Dec 22 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
js实现无缝轮播图
Mar 09 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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
基于initPHP的框架介绍
2013/04/18 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
对联广告js flash激活
2006/10/19 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python语言的优势是什么
2020/06/17 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
一份婚庆公司创业计划书
2014/01/11 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
班主任自我评价范文
2015/03/11 职场文书
行政介绍信范文
2015/05/04 职场文书
请客吃饭开场白
2015/06/01 职场文书
预备党员介绍人意见
2015/06/01 职场文书
排球赛新闻稿
2015/07/17 职场文书
小学运动会通讯稿
2015/07/18 职场文书
大学新生入学感想
2015/08/07 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
MySQL派生表联表查询实战过程
2022/03/20 MySQL