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 读取图片文件的大小
Jun 25 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
详解如何修改 node_modules 里的文件
May 22 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
原生js实现放大镜
2017/02/20 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
js实现内置计时器
2019/12/16 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
javascript实现时钟动画
2020/12/03 Javascript
Python中Threading用法详解
2017/12/27 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
人事专员工作职责
2014/02/22 职场文书
会议通知范文
2015/04/15 职场文书
升学宴家长答谢词
2015/09/29 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers