下载文档原格式
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实现的简单下拉框联动功能⽰例本⽂实例讲述了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> JS下拉联动</title><script>function setSecond(obj){var val = obj.value;if(val == 'en'){var sec = document.getElementById('second');sec.innerHTML = "<option>one</option><option>two</option>";}else{var sec = document.getElementById('second');sec.innerHTML = "<option>⼀</option><option>⼆</option>";}}</script></head><body><div><select id="first" onchange="setSecond(this)"><option value="en">en</option><option value="zh">zh</option></select></div><div><select id="second"></select></div></body></html>使⽤innerHTML，IE浏览器不⽀持这种⽅法的，所以改进⽅法：<!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> JS下拉联动</title><script>function setSecond(obj){var val = obj.value;if(val == 'en'){var sec = document.getElementById('second');sec.options[0] = new Option("one","one");sec.options[1] = new Option("two","two");}else{var sec = document.getElementById('second');sec.options[0] = new Option("⼀","one");sec.options[1] = new Option("⼆","two");//可设置循环配置，也可⼀个⼀个配置}}</script></head><body><div><select id="first" onchange="setSecond(this)"><option value="en">en</option><option value="zh">zh</option></select></div><div><select id="second"></select></div></body></html>可以兼容⽕狐，IE等更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
js实现下拉框⼆级联动在做项⽬的时候，⼀个添加问题题⽬，选项和答案的问题，题⽬类型分为选择题，判断题，和多选题三种，此处需要添加⼀个⼆级联动的功能，即当题型为选择题的时候，正确选项的下拉框⾥出现的是A,B,C,D.如果题型是判断题，正确选项的下拉框内容为正确，错误，如果题型类型为多选题，则正确答案的输⼊框变为可输⼊答案型的⽂本框。
实现效果在⽂末。
HTML的页⾯如下：<div class='form-group'><label class='col-md-2 control-label'>题型</label><div class='col-md-2'>//通过fn()函数去改变答案框状态的改变<select class="form-control input-sm" id="type" onclick="fn()"><option value="选择题">选择题</option><option value="判断题">判断题</option><option value="多选题">多选题</option></select></div></div><div class='form-group'><label class='col-md-2 control-label'>正确选项</label><div class='col-md-10'>//此处写⼀个下拉框⼀个input框，当题型为多选时，利⽤JS将下拉框隐藏，input框显⽰<input class='form-control' placeholder='正确选项' type='text' name='answerTrue1' id='answerTrue1' type="hidden" data-bv-notempty='true' data-bv-notempty-message='正确答案不能为空'> <select class="form-control input-sm" id="answerTrue2" name="answerTrue2"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></div></div>以下为JS部分：<script type="text/javascript">//页⾯加载时执⾏init函数，使多选题的正确答案的⽂本框隐藏init();function init（）{$("#answerTrue1").hide();}//题⽬类型和答案选择的⼆级联动function fn(){var type=document.getElementById("type");var t=type.value;var answer=document.getElementById("answerTrue2");switch(t){//判断是选择题还是判断题，然后改变下拉框中的内容case "选择题": answer.innerHTML="<option>A</option><option>B</option><option>C</option><option>D</option>";$("#answerTrue1").hide();$("#answerTrue2").show();break;case "判断题":answer.innerHTML="<option>正确</option><option>错误</option>";$("#answerTrue1").hide();$("#answerTrue2").show();break;default:$("#answerTrue1").show();$("#answerTrue2").hide();}};</script>实现效果如下：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
javascript实现多级联动下拉菜单的⽅法本⽂实例讲述了javascript实现多级联动下拉菜单的⽅法。
分享给⼤家供⼤家参考。
具体实现⽅法如下：复制代码代码如下:<SCRIPT LANGUAGE="JavaScript"><!-- Beginvar arrItems1 = new Array();var arrItemsGrp1 = new Array();arrItems1[3] = "列⼆";arrItemsGrp1[3] = 1;arrItems1[4] = "列⼆三";arrItemsGrp1[4] = 1;arrItems1[5] = "列⼆四";arrItemsGrp1[5] = 1;arrItems1[6] = "列三";arrItemsGrp1[6] = 2;arrItems1[7] = "列三⼀";arrItemsGrp1[7] = 2;arrItems1[0] = "列四";arrItemsGrp1[0] = 3;arrItems1[1] = "列四⼀";arrItemsGrp1[1] = 3;arrItems1[2] = "列四⼆";arrItemsGrp1[2] = 3;var arrItems2 = new Array();var arrItemsGrp2 = new Array();arrItems2[21] = "列4-0";arrItemsGrp2[21] = 0arrItems2[22] = "列4-1";arrItemsGrp2[22] = 0arrItems2[31] = "列41-0";arrItemsGrp2[31] = 1arrItems2[34] = "列41-1";arrItemsGrp2[34] = 1arrItems2[35] = "列42-0";arrItemsGrp2[35] = 2arrItems2[99] = "列24-2";arrItemsGrp2[99] = 5arrItems2[100] = "列24-1";arrItemsGrp2[100] = 5arrItems2[57] = "列24-0";arrItemsGrp2[57] = 5arrItems2[101] = "列2-0";arrItemsGrp2[101] = 3arrItems2[102] = "列2-1";arrItemsGrp2[102] = 3arrItems2[103] = "列23-0";arrItemsGrp2[103] = 4arrItems2[104] = "列23-1";arrItemsGrp2[104] = 4arrItems2[105] = "列3-0";arrItemsGrp2[105] = 6arrItems2[106] = "列3-1";arrItemsGrp2[106] = 6arrItems2[200] = "列31-0";arrItemsGrp2[200] = 7arrItems2[201] = "列31-1";arrItemsGrp2[201] = 7arrItems2[203] = "列31-2";arrItemsGrp2[203] = 7function selectChange(control, controlToPopulate, ItemArray, GroupArray){var myEle ;var x ;// Empty the second drop down box of any choicesfor (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;if ( == "firstChoice") {// Empty the third drop down box of any choicesfor (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;}// ADD Default Choice - in case there are no valuesmyEle = document.createElement_x("option") ;myEle.value = 0 ;myEle.text = "[列表]" ;controlToPopulate.add(myEle) ;for ( x = 0 ; x < ItemArray.length ; x++ ){if ( GroupArray[x] == control.value ){myEle = document.createElement_x("option") ;myEle.value = x ;myEle.text = ItemArray[x] ;controlToPopulate.add(myEle) ;}}}// End --></script><form name=myChoices><table align="center"><tr><td><SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);"><option value="0">列表⼀</option><option value="1">列表⼆</option><option value="2">列表三</option><option value="3">列表四</option></SELECT></TD><TD><SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);"></SELECT><SELECT id=thirdChoice name=thirdChoice></SELECT></TD></TR></TABLE></form>希望本⽂所述对⼤家的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>。
相关文章:select 下拉列表(添加,删除option对象)select元素javascript常用操作JavaScript对Select控件的操作推荐圈子: 大连JAVAeyer群更多相关推荐 1判断select选项中是否存在Value="paraValue"的Item2向select选项中加入一个Item3从select选项中删除一个Item4删除select中选中的项5修改select选项中 value="paraValue"的text为"paraText"6设置select中text="paraText"的第一个Item为选中7设置select中value="paraValue"的Item为选中8得到select的当前选中项的value9得到select的当前选中项的text10得到select的当前选中项的Index11清空select的项// 1.判断select选项中是否存在Value="paraValue"的Itemfunction jsSelectIsExitItem(objSelect, objItemValue) {var isExit = false;for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options.value == objItemValue) {isExit = true;break;}}return isExit;}// 2.向select选项中加入一个Itemfunction jsAddItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {alert("该Item的Value值已经存在");} else {var varItem = new Option(objItemText, objItemValue);objSelect.options.add(varItem);alert("成功加入");}}// 3.从select选项中删除一个Itemfunction jsRemoveItemFromSelect(objSelect, objItemValue) {//判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options.value == objItemValue) {objSelect.options.remove(i);break;}}alert("成功删除");} else {alert("该select中不存在该项");}}// 4.删除select中选中的项function jsRemoveSelectedItemFromSelect(objSelect) {var length = objSelect.options.length - 1;for(var i = length; i >= 0; i--){if(objSelect.selected == true){objSelect.options = null;}}}// 5.修改select选项中 value="paraValue"的text为"paraText"function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options.value == objItemValue) {objSelect.options.text = objItemText;break;}}alert("成功修改");} else {alert("该select中不存在该项");}}// 6.设置select中text="paraText"的第一个Item为选中function jsSelectItemByValue(objSelect, objItemText) {//判断是否存在var isExit = false;for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options.text == objItemText) {objSelect.options.selected = true;isExit = true;break;}}//Show出结果if (isExit) {alert("成功选中");} else {alert("该select中不存在该项");}}// 7.设置select中value="paraValue"的Item为选中document.all.objSelect.value = objItemValue;// 8.得到select的当前选中项的valuevar currSelectValue = document.all.objSelect.value;// 9.得到select的当前选中项的textvar currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; // 10.得到select的当前选中项的Indexvar currSelectIndex = document.all.objSelect.selectedIndex;// 11.清空select的项document.all.objSelect.options.length = 0;。
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>带有⼩三⾓的下拉框<div class="wrap"><ul><li></li>....</ul><div class="triangle1"></div><div class="triangle2"></div></div>/*三⾓*/.wrap>ul{position: relative;left: 0px;}.wrap {position: relative;top: -2530px;left: -250px; background-color: rgb(15, 14, 14); border: 1px solid grey;width: 160px;height: 550px;z-index: 999;display: none;margin: 0auto;}.triangle1 {display: block;position: absolute;width: 0px;height: 0px;border: 8px solid transparent;border-bottom-color: rgb(112, 106, 106); top: -17px;left: 20px;margin: 0auto;}.triangle2 {display: block;position: absolute;width: 0px;height: 0px;border: 8px solid transparent;top: -16px;border-bottom-color: rgb(14, 13, 13); left: 20px;margin: 0auto;}。
⽤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下拉框操作常⽤⽅法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;}}。
Js控制密保问题下拉框
前段时间书写一个密保问题的验证，要求有三个密保问题并且上面问题选中后下面的选择框不再出现上面的值，看起来貌似很简单的可是真正做起来这个Js还是挺麻烦的现在把最终的发出来和大家分享下
var questions =new Array();
<c:forEach var="memberQuestion"items="${memberQuestions}">
questions.push({questionId:'${memberQuestion.questionId}', questionContext:'${memberQuestion.questionContext}'});
</c:forEach>
var question1 = document.getElementById("question1");
var question2 = document.getElementById("question2");
var question3 = document.getElementById("question3");
//初始化问题
function doInit(){
if(questions.length==0 || questions==null){
return;
}
for(var i=0;i<questions.length;i++){
var question = questions[i];
question1.options.add(new
Option(question.questionContext,question.questionId));
question2.options.add(new
Option(question.questionContext,question.questionId));
question3.options.add(new
Option(question.questionContext,question.questionId));
}
}
//下拉框改变事件
function doChange(){
var q1Id = question1.value;
var q2Id = question2.value;
var q3Id = question3.value;
var oneIndex = 0;
var twoIndex = 0;
var threeIndex = 0;
question2.options.length=0;
question1.options.length=0;
question3.options.length=0;
question1.options.add(new Option("--请选择密保问题--",0)); question2.options.add(new Option("--请选择密保问题--",0)); question3.options.add(new Option("--请选择密保问题--",0)); oneIndex = doResetSelectBox(q1Id,q2Id,q3Id,question1);
twoIndex = doResetSelectBox(q2Id,q1Id,q3Id,question2);
threeIndex = doResetSelectBox(q3Id,q1Id,q2Id,question3); question1.options.selectedIndex = oneIndex;
question2.options.selectedIndex = twoIndex;
question3.options.selectedIndex = threeIndex;
}
//加载当前下拉框并返回选择的索引值
function doResetSelectBox(currentId,otherId1,otherId2,selectBox){ var j=1;
var index = 0;
for(var i=0;i<questions.length;i++){
var question = questions[i];
var questId = question.questionId;
if(otherId1!="0"&&otherId1==questId){
continue;
}
if(otherId2!="0"&&otherId2==questId){
continue;
}
selectBox.options.add(new
Option(question.questionContext,question.questionId));
if(questId==currentId)
index = j;
j++;
}
return index;
}
doInit();。
