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实现动态CSS换肤技术的脚本
Jun 29 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
浅谈JavaScript字符集
May 22 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
详解Bootstrap按钮
Jan 04 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 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 获取完整url地址
2008/12/20 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
js 颜色选择插件
2017/01/23 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python lambda表达式用法实例分析
2018/12/25 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python中常见的数制转换有哪些
2020/05/27 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
安全生产投入制度
2014/01/29 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
把77A收信机改造成收音机
2022/04/05 无线电
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python