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" ><!-- style="position:relative;" --><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"><!-- Beginvar messages = new Array();messages[0] = ""; //这⾥写⼊每个选项对应的说明⽂字messages[1] = "https://";messages[2] = "";messages[3] = "";//根据需要，这⾥应该随着选项的改变⽽增减项⽬function messageReveal() {var messageindex = document.messageForm.messagePick.selectedIndex;//取得当前下拉菜单选定项⽬的序号helpmsg = messages[messageindex];//根据序号取得当前选项的说明document.messageForm.messageField.value = helpmsg//将说明写进⽂框}// End --></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实现下拉文本框(可选可输入)
<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事件*/