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 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
967 个函式
2006/10/09 PHP
php实现对象克隆的方法
2015/06/20 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详谈python在windows中的文件路径问题
2018/04/28 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
银行授权委托书范本
2014/10/04 职场文书
离婚协议书范本
2015/01/26 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL