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学习笔记1 数据类型
Jan 11 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
详解JS数值Number类型
Feb 07 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
JavaScript实现简单的音乐播放器
Aug 14 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原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
javascript如何写热点图
2015/12/08 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
python 处理string到hex脚本的方法
2018/10/26 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python标记语句块使用方法总结
2019/08/05 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python 实现的车牌识别项目
2021/01/25 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
教师找工作推荐信
2013/11/23 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014年实习期工作总结
2014/11/27 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电