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 相关文章推荐
JS制作手机端自适应缩放显示
Jun 11 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
jQuery实现日历效果
Sep 11 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 引用(&amp;)详解
2009/11/20 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
JS继承 笔记
2011/07/13 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
js调用css属性写法
2013/09/21 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
Vue 打包体积优化方案小结
2020/05/20 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
营业经理岗位职责
2013/11/10 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
中介业务员岗位职责
2014/04/09 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
中秋节祝酒词
2015/08/12 职场文书