js实现下拉框具有输入功能的方法.

javascript实现下拉提示选择框

javascript实现下拉提⽰选择框本⽂介绍了select和sugget结合起来使⽤的例⼦，⽀持下拉的直接选择，也⽀持在下拉内容中输⼊过滤。

整体效果就是下⾯这样的：1、⾸先需要引⼊如下⽂件<link href="select2.min.css" rel="stylesheet" /><script type="text/javascript" src="jquery-2.1.4.min.js"></script><script type="text/javascript" src="select2.min.js"></script>这⾥要注意jquery要放在select2的前⾯。

2、⼀些实例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="select2.min.css" rel="stylesheet" /><style type="text/css">.select2-dropdown {margin-left: 8px !important;margin-top: 20px !important;}</style></head><body><h1>这是单选例⼦</h1><div class="s1-example"><select class="js-example-basic-single" style="width:200px"><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="">请选择</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California1111111111111111111111111111111111111111111111111</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup><optgroup label="Mountain Time Zone"><option value="AZ">Arizona</option><option value="CO">Colorado</option><option value="ID">Idaho</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NM">New Mexico</option><option value="ND">North Dakota</option><option value="UT">Utah</option><option value="WY">Wyoming</option></optgroup><optgroup label="Central Time Zone"><option value="AL">Alabama</option><option value="AR">Arkansas</option><option value="IL">Illinois</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="OK">Oklahoma</option><option value="SD">South Dakota</option><option value="TX">Texas</option><option value="TN">Tennessee</option><optgroup label="Eastern Time Zone"><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="IN">Indiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="OH">Ohio</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WV">West Virginia</option></optgroup></select></div><h1>这是多选例⼦</h1><div class="s2-example"><select class="js-example-basic-multiple" multiple="multiple"><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="">请选择</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California1111111111111111111111111111111111111111111111111</option> <option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup><optgroup label="Mountain Time Zone"><option value="AZ">Arizona</option><option value="CO">Colorado</option><option value="ID">Idaho</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NM">New Mexico</option><option value="ND">North Dakota</option><option value="UT">Utah</option><option value="WY">Wyoming</option></optgroup><optgroup label="Central Time Zone"><option value="AL">Alabama</option><option value="AR">Arkansas</option><option value="IL">Illinois</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="OK">Oklahoma</option><option value="SD">South Dakota</option><option value="TX">Texas</option><option value="TN">Tennessee</option><option value="WI">Wisconsin</option></optgroup><optgroup label="Eastern Time Zone"><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="IN">Indiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="NJ">New Jersey</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="OH">Ohio</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WV">West Virginia</option></optgroup></select></div><h1>这是可清除有提⽰例⼦</h1><div class="s3-example"><select class="js-example-placeholder-single" style="width:200px"><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="">请选择</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California1111111111111111111111111111111111111111111111111</option> <option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup><optgroup label="Mountain Time Zone"><option value="AZ">Arizona</option><option value="CO">Colorado</option><option value="ID">Idaho</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NM">New Mexico</option><option value="ND">North Dakota</option><option value="UT">Utah</option><option value="WY">Wyoming</option></optgroup><optgroup label="Central Time Zone"><option value="AL">Alabama</option><option value="AR">Arkansas</option><option value="IL">Illinois</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="OK">Oklahoma</option><option value="SD">South Dakota</option><option value="TX">Texas</option><option value="TN">Tennessee</option><option value="WI">Wisconsin</option></optgroup><optgroup label="Eastern Time Zone"><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="IN">Indiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="OH">Ohio</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="VT">Vermont</option></optgroup></select></div><div class="s4-example"><select class="js-example-placeholder-multiple" multiple="multiple" style="width:400px"><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="">请选择</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California1111111111111111111111111111111111111111111111111</option> <option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup><optgroup label="Mountain Time Zone"><option value="AZ">Arizona</option><option value="CO">Colorado</option><option value="ID">Idaho</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NM">New Mexico</option><option value="ND">North Dakota</option><option value="UT">Utah</option><option value="WY">Wyoming</option></optgroup><optgroup label="Central Time Zone"><option value="AL">Alabama</option><option value="AR">Arkansas</option><option value="IL">Illinois</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="OK">Oklahoma</option><option value="SD">South Dakota</option><option value="TX">Texas</option><option value="TN">Tennessee</option><option value="WI">Wisconsin</option></optgroup><optgroup label="Eastern Time Zone"><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="IN">Indiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="OH">Ohio</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WV">West Virginia</option></optgroup></select></div><h1>这是直接使⽤js对象初始化的例⼦</h1><div><select class="js-example-data-array" style="width:200px"></select></div><div><select class="js-example-data-array-selected" style="width:200px"></select></div><script type="text/javascript" src="jquery-2.1.4.min.js"></script><script type="text/javascript" src="select2.min.js"></script><script type="text/javascript">$(document).ready(function() {$(".js-example-basic-single").select2(); //单选$(".js-example-basic-multiple").select2(); //多选$(".js-example-placeholder-single").select2({ //允许清除placeholder: "Select a state", //默认提⽰语allowClear: true});$(".js-example-placeholder-multiple").select2({placeholder: "Select a state" //默认提⽰语});var data = [{id: 0,text: 'enhancement'}, {id: 1,text: 'bug'}, {id: 2,text: 'duplicate'}, {id: 3,text: 'invalid'}, {id: 4,text: 'wontfix'}];$(".js-example-data-array").select2({data: data})$(".js-example-data-array-selected").select2({data: data})});</script></body></html>3、效果效果1效果2还有⼀些其它的内容，⽐如果说⽀持通过ajax查找来填充，⽀持input等，想要了解更多内容的朋友请阅读相关⽂章。

js实现可输入可选择的select下拉框

js实现可输⼊可选择的select下拉框本⽂实例为⼤家分享了可输⼊可选择的select下拉框，供⼤家参考，具体内容如下1、原理：1.1将input输⼊框和select框合并在⼀起，但是显⽰出向下点击的按钮:这种⽐较容易做到1.2出现输⼊值能够⾃动匹配的功能动态的加载⼀个临时的div出现在该input下⽅，当点击页⾯中的空⽩地⽅，div隐藏。

1.3代码：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><script language="Javascript" src="/reserve/common/js/jquery-1.7.2.min.js"></script></head><body><div style="z-index:1" ><span style="margin-left:100px;width:18px;overflow:hidden;"><select id='editable-Select--<%=i %>' name="editable-Select" onClick="getkindcode(this)"style="width:185px;height:21px;margin-left:-100px;" ><%ArrayList acckindList = akc.accKindList();for(int j = 0;j<acckindList.size();j++){akdto = (accKindDto)acckindList.get(j);%><option value="<%=akdto.getAcckindcode() %>--<%=akdto.getAcckindname() %>"><%=akdto.getAcckindcode() %>--<%=akdto.getAcckindname() %></option><%} %></select></span><input type="text" name="box" id='box_<%=i %>' onKeyup="changeText(this)"style="width:165px;height:15px;margin-left:-190px;"><script type="text/javascript">function changeText(obj){var len = document.getElementById('editable-Select--0').options.length ;//alert(len);var totalValues;for(i=0;i<len;i++){totalValues+= document.getElementById('editable-Select--0').options[i].text+',';}//alert("totalValues.length=="+totalValues.length);//alert("totalValues=="+totalValues);var inputId= obj.id;var inv = document.getElementById(obj.id).value;//showTip(obj.id,totalValues);var _inputNode = document.getElementById(inputId);_inputValue = _inputNode.value;if(/^[\s]*$/.test(_inputValue)){//alert("kongge");return;}_parentNode = _inputNode.parentNode;_divNode = document.createElement("div");var config = {backgroundColor: "#FFFFFF",hoverBackgroundColor: "#BFEFFF",divHeight: "100px",divWidth: "180px",divBorder: "1px solid gray",overflowY: "scroll",inputHeight: 20};//console.log(_inputNode);--不兼容//alert(_inputNode);$.extend(true,config);//如果已经存在了divNode 则删除var _lastDivNode = document.getElementById(inputId+"_div");//$("#"+inputId+"_div")[0];if(_lastDivNode)_parentNode.removeChild(_lastDivNode);var _offsetPosition = getPosition(_inputNode);//显⽰待选div样式_divNode.id = inputId+"_div";//alert("div---:"+_divNode.id);_divNode.style.height = config.divHeight;_divNode.style.width = config.divWidth;_divNode.style.overflowY = config.overflowY;_divNode.style.display = "block";_divNode.style.border = config.divBorder;_divNode.style.position = "absolute";_divNode.style.top = (_offsetPosition.y+config.inputHeight)+"px";_divNode.style.left = _offsetPosition.x+"px";//第⼀次加载的时候初始化样式⽂件//var _headNode = $("head")[0];//alert("_headNode=="+_headNode);//var _cssNode = document.createElement("style");//var _cssContent = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}";//_cssContent += "#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}";//alert("_cssContent=="+_cssContent);//_cssNode.innerHTML = _cssContent;// ie8不识别innerHTML 没有背景颜⾊是这⾥的问题//alert("_cssNode=="+_cssNode.innerHTML);//兼容ie：动态加载样式function includeStyleElement(styles,styleId) {if (document.getElementById(styleId)) {return}var style = document.createElement("style");style.id = styleId;(document.getElementsByTagName("head")[0] || document.body).appendChild(style);if (style.styleSheet) { //for iestyle.styleSheet.cssText = styles;} else {//for w3cstyle.appendChild(document.createTextNode(styles));}}var styles = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}";styles+="#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}";includeStyleElement(styles,inputId+"_style");//alert(styles);// _headNode.appendChild(document.createTextNode(cssContent));_divNode.innerHTML = "";var _divHtml = "";var optionobj = document.getElementById('editable-Select--0').options;for(var i=0;i<optionobj.length;i++){var _tempValue = optionobj[i].value;if(isIncluded(_tempValue,_inputValue)){_divHtml += "<div onclick='_inputDivClick(\""+inputId+"\",\""+_divNode.id+"\",\""+_tempValue+"\")'>"+_tempValue+"</div>"; }}_divNode.innerHTML = _divHtml;//alert("_divNode内容=="+_divNode.innerHTML);if(_divNode.innerHTML == null || _divNode.innerHTML == "" ){ hide(inputId);}_parentNode.appendChild(_divNode);function hide(inputId) {//alert("hide()----inputid=="+inputId);var div_id = inputId+"_div";//document.getElementById(div_id).style.visibility = 'hidden';$('#'+div_id).css('display','none');}/*** _inputDivClick 当选中⼀个下拉列表选项时触发* inputNodeId: 输⼊框的id* divNodeId: ⾃动创建的div的id* value: 待选值*//* function _inputDivClick(inputNodeId,divNodeId,value){alert("_inputDivClick-----");var inputNode = document.getElementById(inputNodeId);alert("inputNode=="+inputNode.value);var divNode = document.getElementById(divNodeId);//var divNode = $("#"+divNodeId)[0];inputNode.value = value;alert("inputNode.value 选择点击值=="+inputNode.value);inputNode.parentNode.removeChild(divNode);} *//*** isInclude⽅法⽤于测试source是否包含有pattern这个字符串* source: 待测试的字符串* pattern:⽂本框输⼊的值*/function isIncluded(source,pattern){var _reg = new RegExp(".*"+pattern+".*");return _reg.test(source);}//将要获取绝对位置的标签传进去，返回⼀个包含x和y属性的对象 function getPosition(e){var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}var point = eval("({x:"+l+",y:"+t+"})");return point;}}</script><script type="text/javascript">/*** _inputDivClick 当选中⼀个下拉列表选项时触发* inputNodeId: 输⼊框的id* divNodeId: ⾃动创建的div的id* value: 待选值*/function _inputDivClick(inputNodeId,divNodeId,value){var inputNode = document.getElementById(inputNodeId);//alert("inputNode=="+inputNode.value);var divNode = document.getElementById(divNodeId);//var divNode = $("#"+divNodeId)[0];inputNode.value = value;//alert("inputNode.value 选择点击值=="+inputNode.value);inputNode.parentNode.removeChild(divNode);}function getkindcode(obj){var index = obj.selectedIndex; // 选中索引var text = obj.options[index].text; // 选中⽂本var Kindvalue = obj.options[index].value; // 选中值var acckindid=obj.id;//alert(acckindid);//alert(Kindvalue);var inputid = "box_"+acckindid.split("--")[1];//alert("inputid："+inputid);var inputobj = document.getElementById(inputid);inputobj.value = Kindvalue;//alert("inputvalue2 ："+inputobj.value);}</script><font color="red" size="2px">* </font><font size="2px">输⼊格式：代码&&名称</font></div><script type="text/javascript">var boxs = document.getElementsByName("box");var num = boxs.length;/* 点击空⽩出隐藏临时div */$(document).bind('click',function(e){var e = e || window.event; //浏览器兼容性var elem = e.target || e.srcElement;//alert("elem.id=="+elem.id);for(var i=0;i<num;i++){var divID = "box_"+i+"_div";while (elem) { //循环判断⾄跟节点，防⽌点击的是div⼦元素if (elem.id && elem.id==divID) {return;}elem = elem.parentNode;}$('#'+divID).css('display','none'); //点击的不是div或其⼦元素}});</script></body></html>1.4效果：option的值是从数据库中读出来的，页⾯会有很多这样的，所以每个inpout的id说循环的。

HTML可输可选下拉框实现的JavaScript脚本

HTML可输可选下拉框实现的JavaScript脚本代码HTML可输可选下拉框实现的JavaScript脚本关键字: javascript html可输可选下拉框在写页⾯时,我们有时会有这样的需求,要下拉框可选可输⼊,该脚本就是可输可选控件.该脚本是根据⽹上某⼤侠源脚本改编⽽成,现记录在此,以备后⽤.源码引⾃：/cxzhq2002　新增功能：⽀持模糊定位、⽀持上下箭选择、⽀持注释层功能、⽀持按回车键从下拉框中选择选项效果图如下所⽰:Js代码//下拉框选项所对应的层的名字var SELECT_DIV="SELECT_DIV_";//注释层的名字var NODE_DIV="NODE_DIV_";var textObject;//焦点是否在选择层上:初始时为false,表⽰默认不在选择层上//主要防⽌⿏标点击选择项时，⽂本框会失去焦点，这样选择层就会跟着隐藏，此时还未//让点击的选择项选中并赋值到⽂本框中去。

此时可以设置⿏标在选择层上时cursorInSelectDivObj=ture//这时点击时不会⽴即隐藏选择层，等选中后再设置cursorInSelectDivObj=false，此时就可以隐藏选择层了var cursorInSelectDivObj=false;//是否是ie浏览器var ie=(document.getElementById && document.all);//全局的注释数组var noteArr = new Array();//以防名字已存在，循环取名，先判断是否存在"Textselectshow_Div"的对象，//如果存在，则重新取名为"Textselectshow_Div1"，如果"Textselectshow_Div1"//还是存在，则取名为"Textselectshow_Div2"，依次类推:"Textselectshow_Div..."for(var i=0;document.getElementById(SELECT_DIV)!=null;i++){var tmpNm = SELECT_DIV + i;//如果存在同名的，则以重新取名为 Textselectshow_Div + i ，如果Textselectshow_Div + i//存在，则循环取名为 Textselectshow_Div + i + 1，直到不重名为⽌。

js实现点击向下展开的下拉菜单效果代码

js实现点击向下展开的下拉菜单效果代码本⽂实例讲述了js实现点击向下展开的下拉菜单效果代码。

分享给⼤家供⼤家参考。

具体如下：这⾥介绍js实现点击向下展开的下拉菜单特效代码，⽆调⽤jQuery，真正的JS下拉菜单，兼容性⽅⾯未做测试，觉得有⽤处的⾃⼰测试修正吧，本⽂仅提供基础的代码供参考。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单</title><style type="text/css">*{margin:0; padding:0}#nav{width:200px; margin:50px}#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}#nav a{display:block; line-height:24px;color:#666666}#nav a:hover{background-color:#eee; color:#000;}#nav div{display:none; border:1px solid #000; border-top:none}</style><script type="text/javascript">function $(id){return document.getElementById(id)}window.onload = function(){$("nav").onclick = function(e){var src = e?e.target:event.srcElement;if(src.tagName == "H3"){var next = src.nextElementSibling || src.nextSibling;next.style.display = (next.style.display =="block")?"none":"block";}}}</script></head><body><div id="nav"><h3>管理区</h3><div><a href="#">建议</a><a href="#">链接</a><a href="#">联系</a></div><h3>交流区</h3><div><a href="#">JavaScript</a><a href="#">Delphi</a><a href="#">VC++</a></div></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

JS实现下拉菜单赋值到文本框的方法

JS实现下拉菜单赋值到⽂本框的⽅法本⽂实例讲述了JS实现下拉菜单赋值到⽂本框的⽅法。

分享给⼤家供⼤家参考。

具体如下：这⾥演⽰下拉菜单和⽂本框构建的介绍栏，将Select框中的值定位到INPUT⽂本输⼊框中，是下拉框赋值到⽂本框的实例，上⽹时候貌似经常见的功能，只是不知如何形容，或许叫做联动吧。

运⾏效果如下图所⽰：在线演⽰地址如下：具体代码如下：<html><head><SCRIPT LANGUAGE="JavaScript"></SCRIPT><title>下拉菜单和⽂本框构建的介绍栏</title></head><body><form name="messageForm"><select name="messagePick" OnChange="messageReveal()"><option value="0">请在这⾥选择需要咨询的信息<option><option>⽹易163<option>中⽂雅虎</select><br><br><br><br><br><input name="messageField" type="text" style="overflow:auto" /></form></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

带输入查询功能匹配下拉框的几种实现方式

带输⼊查询功能匹配下拉框的⼏种实现⽅式在Web开发中我们经常需要⽤户进⾏输⼊操作，输⼊框内我们输⼊⼏个字，输⼊框就会出现下拉提⽰你可能要输⼊的完整信息。

下⾯我总结了⼏种常见的⽅案：⼀：EasyUi combobox 组合框当然，你若觉得样式不怎么好看，引⼊easyui的 js 和css,可以进⾏简单的样式调整如下：.textbox {webkit-border-radius: 0px;border-radius: 0px;border: 1px solid #DDD;margin-left: 20px;margin-top: 5px;width: 377px !important;.....}⼆：select与input⽂本框的结合将text⽂本框覆盖到select下拉框上, 通过onchange()给⽂本框赋值，这也是⽹上⽐较常见的⼀种⽅式。

三：使⽤html5 的dataList<input type="text" id="textSelect" list="dataListForSelect" /><datalist id="dataListForSelect"><option value="Monday" /><option value="Tuesday" /><option value="Wednesday" /><option value="Thursday" /><option value="Friday" /><option value="Saturday " /><option value="Sunday" /><option value="Year" /><option value="Month" /><option value="Day" /></datalist>这是⼀种⽐较简洁的写法，⽀持Firefox、Chrome、Opera和部分IE，不⽀持。

使用javascript动态生成输入框及下拉选项

Javascript动态生成输入框及下拉选项<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><html><script>function doAddTable(){var infotab = document.getElementById("tableItem");var row = infotab.insertRow();var rowIdx= row.rowIndex-1;var rowlength=infotab.rows.length;//var fielId="<input type=\"text\" id=\"fielId"+rowIdx+"\" name=\"fielId"+rowIdx+"\" >"; 我在使用id=field+rowindex后台取值存在bug;下面的都直接更新了var fielId="<input type=\"text\" id=\"fielId\" name=\"fielId\" >";var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',fielId);var effFlag="<select name=\"effFlag\" id=\"effFlag\"><option value=\"1\">有效</option><option value=\"-1\">无效</option></select>";var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',effFlag);var fieldType="<select name=\"fieldType\" id=\"fieldType\"><option value=\"NUM\">数字</option><option value=\"STR\">字符串</option></select>"var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',fieldType);var fieldFlag="<select name=\"fieldFlag\" id=\"fieldFlag\"><option value=\"1\">可修改</option><option value=\"0\">不可修改</option><option value=\"2\">计算值</option></select>"var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',fieldFlag);var fieldDesc="<input type=\"text\" name=\"fieldDesc\" id=\"fieldDesc\">"var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',fieldDesc);//假如数据已经从数据库查出，把java中数组的值赋给js中Arrayvar provinceName=new Array('河南','河北','湖南','湖北');var provinceId=new Array('1001','1002','1003','1004');//省份主键var provinceNameTab="<select name=\"pro\" id=\"pro\" onchange=\"javascript:changeSelect(this);\">";provinceNameTab+="<OPTION value='' selected>--请选择--</OPTION>";for(var i=0;i<provinceName.length;i++){provinceNameTab+="<OPTIONvalue='"+provinceId[i]+"'>"+provinceName[i]+"</OPTION>";}provinceNameTab+="</select>";var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',provinceNameTab);//var cityTab="<select name=\"city\" id=\"city\"><option value=\" \">--请选择--</option></select>"var cell =row.insertCell();cell.insertAdjacentHTML('BeforeEnd',cityTab);cell =row.insertCell();cell.insertAdjacentHTML("BeforeEnd","<input type=\"button\" class=button value=\"删除\" onclick=\"javascript:delRow(this);\">");}function delRow(obj){var index=obj.parentElement.parentElement.rowIndex; //取得当前行的index;我的理解是obj就是当前的input或select，他的父元素应该是td,td的父元素是tr；考虑到兼容性使用parentNode更好些，这里就先这样吧var infotab = document.getElementById('tableItem');alert(index);infotab.deleteRow(index);}function getPara(){var flag=false;var infotab = document.getElementById('tableItem');if(infotab.rows.length==1){alert("请添加一行数据");return flag;}for(var i=0;i<infotab.rows.length-1;i++){//var field= document.getElementsByName('fielId'+i)[0].value;之前的取值var field= document.getElementsByName('fielId')[i].value;//现在取值方式//var pId=document.getElementsByName('pro')[i].value;alert(field);//alert(pId);}}</script><script type="text/javascript">function changeSelect(obj){//建立一个javascript对象用以保存java数据//alert(1111);var cityName=new Array('郑州','洛阳','信阳','石家庄','邯郸','张家口','长沙','岳阳','常德','武汉','宜昌','襄阳','荆州','黄石');var cityId =new Array('c001','c002','c003','c004','c005','c006','c007','c008','c009','c010','c011','c012','c013','c014') ;//城市主键var unitedId=new Array('1001','1001','1001','1002','1002','1002','1003','1003','1003','1004','1004','1004','1004','100 4');//相当于城市的外键var index=obj.parentElement.parentElement.rowIndex;//获取当前传入的select在第几行;parentElement可以被parentNode代替//获取需要改变的下拉菜单对象alert(obj.value);var f=document.getElementsByName('city')[index-1];//获取当前被选中的对象f.options.length=1;for(var i=0;i<=unitedId.length;i++){//当i==1的时候根据传来的document对象的value开始判断，如果document对象的value在javascript 数组对象中的有一个对象的数组下标的值不为-1，就添加到下拉菜单中if(obj.value!=null&&obj.value!=''&&unitedId[i]==obj.value){f.options.add(new Option(cityName[i],cityId[i]));//当document对象的value为空的时候，把所有的javascript 数组对象中的值添加到下拉菜单中}}}</script><body><table id="tableItem" border="1"><tr><td>value1</td><td>value2</td><td>value3</td><td>value4</td><td>value5</td><td>选择</td><td>改变</td><td>删除行</td></tr></table><table><td><input name="btnSubmit" type="button" value="新增一条" onclick="doAddTable();">  </td><td><input type="button" value="显示值" onclick="getPara();">  </td></table></body><div>说明：动态生成的输入框使用doucument.getElementById貌似取不到值；只弹出每列第一个输入框的值，其他自己试如果查看效果，新建一html文件copy进去就ok了;上面的写法存在的bug就当多条记录，再删除行，这时候新增的input或select的id已经确定；例如新增10条记录，删除第7条，这时第7(id是xxx6)条往后的id仍然是xxx7,xxx8，xxx9;由于我后台是根据传入的tablength（此时length=9）值进行循环取值，那么从0-8做循环时取的(xxx6)应该是空值，且最后一条(xxx9)值无法取到，循环到xxx8就结束;上传没多久我就意识到错误，由于时间原因没有及时更新，给借鉴者带来不便,望见谅;我也是菜鸟js写的也不多，希望大家一起交流，共同进步qq 393200976见有些朋友在找根据onchange事件监听动态生成下拉框的js，我写了一个简陋的例子，省份与城市的级联关系;</div></html>。

js实现下拉文本框(可选可输入)

<!DOCTYPE>
<html xmlns="/1999/xhtml">
<head>
<title>可编辑下拉框</title>
</head>
</head>
<body>
<select name="fason"style="width: 140px;">
<option value=""></option>
/*切割下拉框*/
}
this.select.onchange=new Function(this.obj+".change()")
this.change()
}
/*初始化结束*/
////////对象事件定义///////
combox.prototype.find=function(){
/*当搜索到输入框的值时,下拉框自动定位*/
var l=e.offsetLeft;
while(e=e.offsetParent)l+=e.offsetLeft;
return l
}
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent)t+=e.offsetTop;
return t
}
/*结束*/
selectedIndex=i
this.change();
break;
}
}
tion(){
/*定义下拉框的onchange事件*/

用JSP+JavaScript打造二级级联下拉菜单

⽤JSP+JavaScript打造⼆级级联下拉菜单JavaScript对下拉菜单的基本操作：1.获取⼀个下拉菜单对象Js代码var select = document.getElementById("selectid");2.在下拉菜单中添加⼀个选项Js代码var option = new Option("value","text");//第⼀项为值，第⼆项为⽂本域3.把选项加⼊到下拉菜单中Js代码select.options.add(option);4.获取被选择的选项的索引Js代码var index = select.selectedIndex;5.获得某个选项的⽂本域Js代码var text = select.options[index].text;6.获得某个选项的值域Js代码var value = select.options[index].value;7.获得选中的值Js代码var value = select.vlaue;以下为实现下拉菜单联动的jsp上的代码 Type type = new Type(1); List select1 = traintype.getSelectFirst(); List select2 = traintype.getSelectSecond();%><script type="text/javascript" language="javascript">//⼆级联动菜单function Select1(){ //动态⽣成js数组var arry1 = new Array(<% for(int i=0;i<select1.size();i++) { if(i<select1.size()-1) out.print("\""+select1.get(i)+"\","); else out.print("\""+select1.get(i)+"\""); }%>);var type = document.getElementById("type");for(var i=0;i<arry1.length;i++){var op = new Option(arry1[i],arry1[i]);type.options.add(op);}}function Select2(){var arry2 = new Array();<% for(int j=0;j<select2.size();j++){List templist = (List)select2.get(j);%>arry2[<%=j%>]=new Array( <%for(int k=0;k<templist.size();k++){ if(k<templist.size()-1) out.print("\""+templist.get(k)+"\","); else out.print("\""+templist.get(k)+"\"");}%>);<%}%>var type = document.getElementById("type");var id = traintype.selectedIndex-1;var name = document.getElementById("name");name.innerHTML="";var top = new Option("--请选择--","");orgname.options.add(top);var temparry = arry2[id];for(var i=0;i<temparry.length;i++){var op = new Option(temparry[i],temparry[i]);orgname.options.add(op);}}<body onload="Select()"><select id="type" name="type" onchange="Select2()" ><option value="">--请选择--</option></select><select id="type" name="type" ><option value="">--请选择--</option></select></body><html>在⽤jsp写动态的下拉菜单时，只能把这部分的代码写在当前的jsp页⾯，这样也限制的js代码的复⽤。

Javascriptselect下拉框操作常用方法

Javascriptselect下拉框操作常⽤⽅法function AddDropDownList(id,fatherCtl){if(!document.getElementById(id)){var ddl = document.createElement('select');ddl.setAttribute("id",id);if(fatherCtl&&document.getElementById(fatherCtl))document.getElementById(fatherCtl).appendChild(ddl);elsedocument.body.appendChild(ddl);}}//删除指定的下拉框function RemoveDropDownList(id){var ctl = document.getElementById(id);if(ctl)ctl.parentNode.removeChild(ctl);}//给下拉框添加选项function AddDDDLOption(id,text,value){var ctl = document.getElementById(id);if(ctl){ctl.options[ctl.options.length] = new Option(text,value);}}//删除所有选项function RemoveAllDDLOptions(id){var ctl = document.getElementById(id);if(ctl){ctl.options.length=0;}}//删除指定索引的选项function RemoveDDLOption(id,index){var ctl=document.getElementById(id);if(ctl && ctl.options[index]){ctl.options[index]=null;}}//获取下拉框选择的值function GetDDLSelectedValue(id){var ctl = document.getElementById(id);if(ctl){return ctl.options[ctl.selectedIndex].value;}}//获取下拉框选择的⽂本function GetDDLSelectedText(id){var ctl = document.getElementById(id);if(ctl){return ctl.options[ctl.selectedIndex].text;}}。

JavaScript实现下拉列表选择框

JavaScript实现下拉列表选择框本⽂实例为⼤家分享了JavaScript实现下拉列表选择框的具体代码，供⼤家参考，具体内容如下创建⼀个页⾯** 两个下拉选择框- 设置属性 multiple属性 -multiple="multiple"(下拉选择框多⾏显⽰)** 四个按钮，有事件tip:多选按住ctrl或者shift点击选项代码如下:<html ><head><title>HTML⽰例</title><style type = "text/css">div#left{float:left;}</style></head><body><div id="left" "><div ><select id="select1" multiple="multiple" style="width:100px;height:1ss00px"><option>AAAAAA</option><option>BBBBBB</option><option>CCCCCC</option><option>DDDDDD</option><option>EEEEEE</option></select><br/></div><div><input type="button" value="选中添加到右边" onclick="selToRight()"/><br/><input type="button" value="全部添加到右边" onclick="selAllRight()"/></div></div><div id="right"><div ><select id="select2" multiple="multiple" style="width:100px;height:1ss00p"><option>FFFFFF</option></select><br/></div><div><input type="button" value="选中添加到左边" onclick="selToLeft()"/><br/><input type="button" value="全部添加到左边" onclick="selAllLeft()"/></div></div></body><script type="text/javascript">// 选中添加到左边function selToLeft(){//获取左边select对象var s1 = document.getElementById("select1");//获取右边select对象var s2 = document.getElementById("select2");//得到左边select对象中的每⼀个optionvar ops = s2.getElementsByTagName("option");for(var i4=0;i4<ops.length;i4++){op4=ops[i4];if(op4.selected==true){s1.appendChild(op4);i4--;}}}//全部添加到左边function selAllLeft(){//获取左边select对象var s1 = document.getElementById("select1");//获取右边select对象var s2 = document.getElementById("select2");//得到左边select对象中的每⼀个optionvar ops = s2.getElementsByTagName("option");for(var i3=0;i3<ops.length;i3++){op3=ops[i3];s1.appendChild(op3);i3--;}}//全部添加到右边function selAllRight(){//获取左边select对象var s1 = document.getElementById("select1");//获取右边select对象var s2 = document.getElementById("select2");//得到左边select对象中的每⼀个optionvar ops = s1.getElementsByTagName("option");for(var i2=0;i2<ops.length;i2++){op2=ops[i2];s2.appendChild(op2);i2--;}}//选中添加到右边function selToRight(){/*步骤:1.获取select⾥⾯的option-getElementByTagName()-返回⼀个数组-遍历数组,得到每⼀个option2.判断option是否被选中-属性selected,判断是否被选中-selected=true;选中-selected=false;未选中3.如果选中,把选中的添加到右边4.得到select25.添加选择的部分-appendChild()⽅法*///获取左边select对象var s1 = document.getElementById("select1");//获取右边select对象var s2 = document.getElementById("select2");//得到左边select对象中的每⼀个optionvar ops = s1.getElementsByTagName("option");//遍历ops数组得到每⼀个option选中状态for(var i1=0;i1<ops.length;i1++){op1 = ops[i1];//判断每⼀个option中selected属性是否选中if(op1.selected == true){//如果选中,添加到右边select中//-使⽤appendChild()⽅法s2.appendChild(op1);//每次添加都会使数组长度减⼀,i1++后长度出现异常,所以我们要--; i1--;}}}</script></html>效果图:以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

运用js如何制作一个联动的下拉框

运用js如何制作一个联动的下拉框
问题描述
学习HTML时初学会了静态的基本下拉框，但是无法实现联动。

在学习了js的dom后，我学习到了如何使用js的dom将普通的下拉框实现联动，就是选择域的指向性，例如：选择性别时只会出现男女，选择身份时只会出现群众、党员，而不会出现其他，就是用下拉框实现的一个键值对的选择项，下面我来介绍如何制作一个可以指定区域的下拉框。

解决方案
首先需要写一个基础的下拉框，注意赋予id的命名，基础下拉框代码如下：
下面需要联动js的dom，为这个基础的下拉框赋予基础的指向值，id为“province”的下拉框为键，id为“city”的为值，下面展示js 的dom代码：
联动js，将“province”的值运用多分支联合“city”的值，为每
个键赋予值，效果如下：
结语
先建立基础下拉框，再用js建立函数，用js的dom将基础下拉框和js函数联动其起来，函数中用js的多分支和数组为每个键的下拉框指定值，最后使用遍历实现每个键值的对应。

注意细节联合，最好使用合适的英文命名为id，可以在后期减少一定的分析和思考。

js实现下拉框具有输入功能的方法

这篇文章主要介绍了js实现select下拉框具有输入功能的方法,实例分析了两种比较常见的实现方法,是非常实用的技巧,需要的朋友可以参考下本文实例讲述了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 />。

可选择和输入的下拉列表框示例

可选择和输⼊的下拉列表框⽰例复制代码代码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>可选择和输⼊的下拉列表框</title><style type="text/css">div,span,p,td,font{font-size:9pt;}</style></head><body><table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left"><span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);"><select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;"onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;"> <option value="" style="color:#c2c2c2;">---请选择---</option><option value="闲⼈书库">闲⼈书库</option><option value="闲⼈BLOG">闲⼈BLOG</option><option value="闲⼈设计">闲⼈设计</option><option value="闲⼈软件">闲⼈软件</option></select></span><span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;"><input type="text" name="ccdd" id="ccdd" value="可选择也可输⼊的下拉框" style="width:170px;height:15px;border:0pt;"></span></td></tr></table></body></html>注意注释的位置。

vue.js实现单选框、复选框和下拉框示例

vue.js实现单选框、复选框和下拉框⽰例Vue.js可以很⽅便的实现数据双向绑定，所以在处理表单，⼈机交互⽅⾯具有很⼤的优势。

下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现⽅式。

⼀、单选框在传统的HTML中实现单选框的⽅法如下：<div id="app"><input type="radio" name="gender" value="man" id="man"/><label for="man">男</label><input type="radio" name="gender" value="woman" id="women"/><label for="women">⼥</label></div>注：这⾥name属性值必须相同，以确保同⼀时间只有⼀个能被选中。

同时⽤于识别发送⾄服务器的数据；value值也很重要，当按钮被选中时，该值将发送给服务器；⽤vue.js实现单选框⽐较⽅便，举例如下。

我们不再需要name属性，只需要使⽤v-model指令给每个选项绑定同⼀个变量就可以确保同⼀时间只有⼀个被选中，同时value属性还是需要的，表⽰选中时的值。

<div id="app"><label>男<input type="radio" v-model="gender" value="man"/></label><label>⼥<input type="radio" v-model="gender" value="woman"/></label><p>已选：{{gender}}</p></div><script>var app=new Vue({el:'#app',data:{gender:''}});</script>⼆、复选框在传统的HTML中实现复选框代码如下：<div id="app"><input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label><input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label><input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label></div>从以上代码可以看到：HTML中单选框和复选框的构造⽅法类似，只是type值变成checkbox，同时也⽤name和value表征⼀个复选框以及选中情况。

原生js实现下拉框功能（支持键盘事件）

原⽣js实现下拉框功能（⽀持键盘事件）话不多说，请看代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>倒计时-多种格式调⽤-原⽣js封装</title><link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/><link rel="icon" href="../public/image/favicon.png" type="images/png"/><link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"><link rel="stylesheet" type="text/css" href="../public/style/common.css"><style type="text/css">/*公共*/html{height:100%;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0;padding: 0}ol, ul {list-style: none}body{position: relative;min-height:100%;font-size:14px;font-family: Tahoma, Verdana,"Microsoft Yahei";color:#333;}a{text-decoration: none;color:#333;}.header{width: 960px;padding-top: 15px;margin: 0 auto;line-height: 30px;text-align: right;}.header a{margin: 0 5px;}.main{width:960px;margin: 50px auto 0;}.code{border:1px dashed #e2e2e2;padding:10px 5px;margin-bottom:25px;}pre {font-family: "Microsoft Yahei",Arial,Helvetica;white-space: pre-wrap; /*css-3*/white-space: -moz-pre-wrap; /*Mozilla,since1999*/white-space: -pre-wrap; /*Opera4-6*/white-space: -o-pre-wrap; /*Opera7*/word-wrap: break-word; /*InternetExplorer5.5+*/}.example{padding-top:40px;margin-bottom:90px;}.example .call{padding:18px 5px;background:#f0f5f8;}.example h2{padding-top:20px;margin-bottom:7px;}.example table {width:100%;table-layout:fixed;border-collapse: collapse;border-spacing: 0;border: 1px solid #cee1ee;border-left: 0;}.example thead {border-bottom: 1px solid #cee1ee;background-color: #e3eef8;}.example tr {line-height: 24px;font-size: 13px;}.example tr:nth-child(2n) {background-color: #f0f5f8;}.example tr th,.example tr td {border-left: 1px solid #cee1ee;word-break: break-all;word-wrap: break-word;padding:0 10px;font-weight: normal;}.example tr th {color: #555;padding-top: 2px;padding-bottom: 2px;text-align: left;}/*公共*/.select-container {width: 186px;margin: 80px 0;position: relative;z-index: 10000;}.select-container .select-pose {width: 150px;height: 24px;line-height: 24px;font-style: normal;padding-left: 4px;padding-right: 30px;border: 1px solid #333333; /* background: url(xjt.png) no-repeat right center; */ }.select-pose:before {content: '';position: absolute;right: 7px;bottom: 7px;width: 0;height: 0;border-width: 4px;border-style: solid;border-color: #888 transparent transparent transparent;transition: all 0.2s;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-o-transition: all 0.2s;-ms-transition: all 0.2s;transform-origin: 50% 25%;-ms-transform-origin: 50% 25%;-moz-transform-origin: 50% 25%;-webkit-transform-origin: 50% 25%;-o-transform-origin: 50% 25%;}.extended.select-pose:before {transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);}.select-container .select-content {width: 184px;border: 1px solid #333333;background-color: #ffffff;position: absolute;z-index: 20000;margin-top: -1px;display: none;overflow: hidden;}.select-list{cursor: pointer;height: 24px;line-height: 24px;padding-left: 10px;}</style><script type="text/javascript">/*封装代码*/(function() {var Select = function(el, opts) {var self = this;var defaults = {before: '#fff',after:'#ccc'}opts = opts || {};for (var w in defaults) {if ("undefined" == typeof opts[w]) {opts[w] = defaults[w];}}this.params = opts;this.container = r(el);if (this.container.length > 1) {var x = [];return this.container.each(function() {x.push(new Select(this, opts))}), x}this.containers=this.container[0];this.pose=this.container.find(".select-pose")[0];this.content=this.container.find(".select-content")[0];this.list=this.container.find(".select-list");this.index=-1;this.init();}Select.prototype = {//初始化init: function() {var self = this;this.page();this.event();this.mover();},event:function(){var self = this;self.pose.addEventListener('click', function(e) {e = e || window.event;e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;var oSrc = e.srcElement || e.target;if(oSrc.className.indexOf('extended') > -1){self.resetM();}else{oSrc.classList.add("extended");self.content.style.display = "block";}}, false);},//⿏标经过listmover:function(){var self = this;var list=this.list;for (var i = 0; i < list.length; i++) {!function(i){list[i].addEventListener('mouseover', function(e) {self.resetA();this.style.background = self.params.after;self.index=i;}, false);}(i)list[i].addEventListener('click', function(e) {self.pose.innerHTML = this.innerHTML;}, false);}},for (var i = 0; i < list.length; i++) {list[i].style.background = self.params.before;}},resetM:function(){var self = this;self.content.style.display = "none";self.pose.classList.remove("extended");self.resetA();},// 点击页⾯空⽩处时page:function(){var self = this;document.addEventListener('click', function(e) {self.resetM();}, false);document.addEventListener('keydown', function(e) {e = e || window.event;var keyVel=e.keyCode;if (keyVel == 38 || keyVel == 37) {e.preventDefault ? e.preventDefault() : e.returnValue = false;//取消事件默认⾏为self.index--;if (self.index < 0) {self.index = self.list.length-1;}self.resetA();self.list[self.index].style.backgroundColor = self.params.after;} else if (keyVel == 39 || keyVel == 40) {e.preventDefault ? e.preventDefault() : e.returnValue = false;//取消事件默认⾏为self.index++;if (self.index > self.list.length-1) {self.index = 0;}self.resetA();self.list[self.index].style.backgroundColor = self.params.after;}else if(keyVel == 13 && self.index != -1){e.preventDefault ? e.preventDefault() : e.returnValue = false;self.pose.innerHTML = self.list[self.index].innerHTML;self.index = -1;self.resetA();self.resetM();}}, false);},}var r = (function() {var e = function(e) {var a = this,t = 0;for (t = 0; t < e.length; t++) {a[t] = e[t];}return a.length = e.length, this};e.prototype = {addClass: function(e) {if ("undefined" == typeof e) return this;for (var a = e.split(" "), t = 0; t < a.length; t++)for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);return this},each: function(e) {for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);return this},html: function(e) {if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;for (var a = 0; a < this.length; a++) this[a].innerHTML = e;return this},find: function(a) {for (var t = [], r = 0; r < this.length; r++)for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);return new e(t)},append: function(a) {var t, r;for (t = 0; t < this.length; t++)if ("string" == typeof a) {var i = document.createElement("div");for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)} else if (a instanceof e)for (r = 0; r < a.length; r++) this[t].appendChild(a[r]);else this[t].appendChild(a);return this},}var a = function(a, t) {var r = [],i = 0;if (a && !t && a instanceof e) {return a;}if (a) {if ("string" == typeof a) {var s, n, o = a.trim();if (o.indexOf("<") >= 0 && o.indexOf(">") >= 0) {var l = "div";for (0 === o.indexOf("<li") && (l = "ul"), 0 === o.indexOf("<tr") && (l = "tbody"), (0 === o.indexOf("<td") || 0 === o.indexOf("<th")) && (l = "tr"), 0 === o.indexOf("<tbody") && (l = "table"), 0 === o.indexOf("<option") && (l = "select"), n = document.createEleme } elsefor (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).querySelectorAll(a) : [document.getElementById(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i])} else if (a.nodeType || a === window || a === document) {r.push(a);} else if (a.length > 0 && a[0].nodeType) {for (i = 0; i < a.length; i++) {r.push(a[i]);}}}return new e(r)};return a;}())window.select = Select;})()/*封装代码*/</script></head><body><div class="main"><div class="select-container" id="select1"><cite class="select-pose">请选择分类</cite><ul class="select-content"><li class="select-list">选项⼀</li><li class="select-list">选项⼆</li><li class="select-list">选项三</li><li class="select-list">选项四</li></ul></div><script type="text/javascript">new select("#select1");</script><div class="code"><p>⽀持键盘事件,执⾏默认参数,⿏标点击分类显⽰,⿏标经过list执⾏默认参数</p><p>new select("#select1");</p></div><div class="example"><div class="call"><h1>调⽤⽅法：</h1><p>new select(selector,{options});</p></div><h2>options参数</h2><table><thead><tr><th width="150">参数</th><th width="100">默认值</th><th>说明</th></tr></thead><tbody><tr><td>before</td><td>'#fff'</td><td>⿏标经过list初始化颜⾊⾊值</td></tr><tr><td>after</td><td>'#ccc'</td><td>⿏标经过list颜⾊⾊值</td></tr></tbody></table></div></div></body></html>以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

js实现带搜索功能的下拉框

js实现带搜索功能的下拉框本⽂实例为⼤家分享了js实现带搜索功能的下拉框，供⼤家参考，具体内容如下1、介绍在实现下拉框的时候，如果⽤select+option可以在满⾜pc端的需求，但如果需应⽤到⼿机端，由于select的样式太丑。

所以接下来利⽤div+p实现到输⼊⽂本的下拉框2、思路1 利⽤⼀个input充当搜索框，div+p充当下拉框放置于input的下⽅。

如图所⽰：2 接下来就是js的实现了，我们先把红⾊区域的div+p利⽤display:none隐藏起来。

对表单input添加onfocus事件，当input获取焦点的时候获取显⽰红⾊区域。

在对表单添加oninput事件，根据input的字段筛选出有关的p标签即可3 对红⾊区域的div设置点击事件，利⽤事件委托将点击的p标签的值赋值到input上即可。

3、代码<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head><style>*{margin: 0;padding: 0;}.search{border: 1px solid transparent;width: 400px;height: 80px;margin: 0 auto;}.search input{border: 1px solid gray;width: 200px;height: 80px;}.content{width: 200px;/* height: 80px; */border: 1px solid red;overflow-y: auto;max-height: 60px;}.content p {height: 20px;}</style><body onload="onload()"><div class="search"><input id="input" type="text" placeholder="请输⼊" onfocus="showDiv()" oninput="filterP()"><div id="dataList" class="content" onclick="pushInput()" style="display:none;"><p>123</p><p>159</p><p>147</p><p>163</p></div></div><script>var dataArr = [];var dataList = document.getElementById('dataList');function onload() { //初始化dataArr的数据var childs = dataList.children; //在IE下注释也算节点,不能⽤于for (var i = 0; i < childs.length; i++) {dataArr.push(childs[i].innerText);}console.log(dataArr);}function showDiv() {dataList.style.display = "";}function filterP() {var e = event.target || event.srcElement;var str = e.value;console.log(str);dataList.innerHTML = ''; //清空div下的所有P元素dataArr.forEach(function (item) {if (item.indexOf(str) != -1) {var p = document.createElement('p');var text = document.createTextNode(item);p.appendChild(text);dataList.appendChild(p);}})console.log("dataList.innerHTML：" + dataList.innerHTML)if (dataList.innerHTML == '') {var p = document.createElement('p');var text = document.createTextNode('暂⽆数据');p.style.color = '#d7d7d7';p.onclick = function () { event.stopImmediatePropagation(); } //阻⽌事件的冒泡p.appendChild(text);dataList.appendChild(p);}}function pushInput() { //利⽤事件委托机制,获取点击的P源var e = event.target || event.srcElement;var input = document.getElementById('input');input.value = e.innerText;dataList.style.display = 'none';}/**stopImmediatePropagation() 和 stopPropagation()的区别在哪⼉呢？后者只会阻⽌冒泡或者是捕获。

JS中Select下拉列表类（支持输入模糊查询）功能

JS中Select下拉列表类（⽀持输⼊模糊查询）功能下⾯给⼤家分享⼀段代码关于select下拉列表类⽀持输⼊模糊查询功能的实现代码，具体代码如下所⽰：<span style="font-size:14px;"> <HTML><HEAD><META http-equiv='Content-Type' content='text/html; charset=gb2312'><TITLE>可输⼊的下拉框</TITLE></HEAD><BODY ><Script Language="Javascript">var j = 0;function SelectValue(obj){var input = obj.parentNode.nextSibling;document.all.box2.value = obj.options[obj.selectedIndex].text;document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;alert(document.getElementById("txtSection").value);}function InputValue(obj){var n = 1;var tmpObj;var src = document.all.SelectOption;var msg = document.all.msg;if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){if(obj.value!=""){msg.style.display="";msg.innerHTML="";if(msg.hasChildNodes()){msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);}for (var i=0;i<src.length;i++){var selValue = document.createElement("div");var selText = document.createElement("div");selText.value = src(i).value;selText.innerHTML = src(i).text;if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){selText.setAttribute("id","selText"+n);selText.onmouseover=function (){this.style.backgroundColor='#003399';this.style.color ='#ffffff';}selText.onmouseout=function (){this.style.backgroundColor='#ffffff';this.style.color ='#000000';}selText.onclick=function (){document.all.box2.value = this.innerHTML;msg.style.display="none";document.getElementById("txtSection").value=this.value;}msg.appendChild(selText);n++;}}}else {document.all.msg.style.display="none";}}else {//press down keyif(event.keyCode==40){j++;for (var i=0; i<src.length; i++){tmpObj = document.getElementById("selText"+i);if(tmpObj != null){tmpObj.style.backgroundColor='#ffffff';tmpObj.style.color ='#000000';}}tmpObj = document.getElementById("selText"+j);if(tmpObj != null){tmpObj.style.backgroundColor='#003399';tmpObj.style.color ='#ffffff';}else{j = 0;}}//press up keyif (event.keyCode==38){j--;for (var i=0; i<src.length; i++){tmpObj = document.getElementById("selText"+i);if(tmpObj != null){tmpObj.style.backgroundColor='#ffffff';tmpObj.style.color ='#000000';}}tmpObj = document.getElementById("selText"+j);if(tmpObj != null){tmpObj.style.backgroundColor='#003399';tmpObj.style.color ='#ffffff';}else{j = 2;}}//press enter keyif (event.keyCode==13){tmpObj = document.getElementById("selText"+j);document.all.box2.value = tmpObj.innerHTML;msg.style.display="none";document.getElementById("txtSection").value=tmpObj.value;}}}function SelMatch(src){var currSel = document.all.box2.value;for (var i=0;i<src.length;i++){if (src(i).text==currSel){src.options(i).selected = true;}}}function NoMsg(){if(document.activeElement.id=="msg")return false;elsedocument.all.msg.style.display='none';}</Script><TABLE border=0 cellPadding=1 cellSpacing=0 width="100%"><TR><TD width="24%"><font face="Arial" size="2">Section</font></TD><TD COLSPAN=3 width="76%"><div style="position:relative;"><span style="margin-left:230px;width:18px;overflow:hidden;"><select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" ><OPTION value='ALL' Selected>ALL</OPTION><OPTION value='0TEST1'>0TEST1 = Testing 1<OPTION value='0TEST1'>0TEST2 = Testing 1<OPTION value='0TEST1'>0TEST3 = Testing 1<OPTION value='SECTION'>SECTION = Section Description XXXXX AAA</OPTION></select></span><input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" > <div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden;width:230px;position:absolute;left:0px;top:20px;display:none"></div></div><Input Type="Hidden" Name="txtSection" id="txtSection"></TD></TR></TABLE><p></BODY></HTML></span>以上所述是⼩编给⼤家介绍的JS中Select下拉列表类(⽀持输⼊模糊查询)功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

用js实现菜单的下拉列表，实用又简单

⽤js实现菜单的下拉列表，实⽤⼜简单下拉列表本可以⽤<select>配合<option>来写，⽅便得很。

但是在前端中，好⽤的东西都有兼容，为了避免出现兼容性的问题，下拉列表⽤js写再合适不⾏了。

<body>部分————————简单的布个局<body><div id="box">请选择⼿机名称</div><div id="down"><ul class="phones"><li>华为</li><li>⼩⽶</li><li>oppo</li><li>vivo</li><li>爱疯</li><li>三星</li></ul></div></body><style>部分————————再简单也要把样式写好看点<style>#box{color: aliceblue;width: 110px;height: 25px;border: 1px solid #c5c5c5;border-radius: 10px;background-color: #797777;text-align: center;/* text-indent: 5px; */font-size: 14px;line-height: 25px;cursor: pointer;}#down{border: 1px solid #c5c5c5;width: 90px;margin-left: 5px;display: none;}ul{padding: 0;margin: 0;}li{list-style: none;font-size: 14px;border-bottom: 1px dashed #c5c5c5;text-align: center;height: 25px;line-height: 25px;color: aliceblue;background-color: #333;cursor: pointer;}li:hover{background-color: #5c0e0e;}</style><script>部分————————实现功能的部分<script>var obox = document.getElementById("box");var odown = document.getElementById("down");var oli = document.querySelectorAll("li");console.log(oli);var timer;//当点击obox时，呈现出下拉列表的内容，给个延时效果obox.onclick = function(){clearInterval(timer);timer = setInterval(function(){odown.style.display = "block";},300)///选中列表中的某⼀项并将其呈现在box中,隐藏下拉列表for(var i=0;i<oli.length;i++){oli[i].n = i;oli[i].onclick = function(){obox.innerHTML = this.innerHTML;odown.style.display = "none";clearInterval(timer);}}}</script> 以上就是我写的⼀个简单的下拉列表，尚有⽋缺处，还望包含。