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技术很烂的五个原因分析
Oct 28 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
班组长工作职责
2013/12/25 职场文书
出国留学介绍信
2014/01/13 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
青年文明号创建承诺
2014/03/31 职场文书
红白喜事主持词
2015/07/06 职场文书
该怎么书写道歉信?
2019/07/03 职场文书