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 相关文章推荐
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
react中Suspense的使用详解
Sep 01 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JS获取时间的方法
2015/01/21 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
pandas的qcut()方法详解
2019/07/06 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
高级销售员求职信
2013/10/25 职场文书
保密工作目标责任书
2014/07/28 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang