<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态添加下拉列表选项框</title> </head> <body> <div id="id-vi-center"> <select name="id-selectColor" id="id-select"> <option>请选择...</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <p>请选择颜色:</p><br> <input type="radio" name="red" value="red" onClick="stSelValue(this.id)">Red <input type="radio" name="red" value="green" onClick="stSelValue(this.id)" >Green <input type="radio" name="red" value="blue" onClick="stSelValue(this.id)">Blue<!-- 当radio多个选项的name值属性相同时表示成单选,只能选一个 --> </div> </body> <script type="text/javascript"> window.onload=function(ev){ var idSel=document.getElementById("id-select"); var arrRadio=document.getElementsByName("radio"); for(var i=0;i<arrRadio.length;i++){ if(arrRadio[i].checked){ idSel.value=arrRadio[i].value; } } } function stSelValue(val){ var idSel=document.getElementById("id-select"); idSel.value=val; } </script> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态添加下拉列表框选项</title> </head> <body> <div id="id-vid-center"> <table> <tr> <th>设置颜色:</th> <td> <select name="selSetColor" id="idSel"> <option>请选择...</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </td> <th>添加颜色:</th> <td><input type="button" id="id-add-color" value="添加颜色" onClick="addColor()"></td> </tr> <tr> <td></td> <td></td> <td>value:</td> <td><input type="text" id="id-sel-val" value=""></td> </tr> <tr> <td></td> <td></td> <td>text:</td> <td><input type="text" id="id-sel-text" value=""></td> </tr> </table> </div> </body> <script type="text/javascript"> function addColor(){ var value=document.getElementById("id-sel-val"); var text=document.getElementById("id-sel-text"); var idSel=document.getElementById("idSel"); var val=value.value; var te=text.value; var opt=new Option(val,te);//第一个是value值,第二个是text值 idSel.options.add(opt); } </script> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态删除下拉列表框选项</title> </head> <body> <div id="id-div-center"> <table> <tr> <th>设置颜色:</th> <td> <select name="selSetColor" id="idSel"> <option>请选择...</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </td> </tr> <tr> <td>删除选项:</td> <td><input type="button" id="id-remove" value="删除颜色" onClick="removeColor()"></td> </tr> <tr> <td>全部删除:</td> <td><input type="button" id="id-allremove" value="全部删除" onClick="removeAllColor()"></td> </tr> </table> </div> </body> <script type="text/javascript"> function removeColor(){ var idSel=document.getElementById("idSel"); idSel.options.remove(idSel.selectedIndex);//选择框内是哪个颜色就会对应颜色的指数,删除该颜色 } function removeAllColor(){ var idSel=document.getElementById("idSel"); idSel.options.length=0; } </script> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>二级联动下拉列表框</title> </head> <body> <div id="id-div-center"> <form name="form2sel"> 大洲: <select name="continent" onchange="sel_country()"><!-- onchange在值改变时触发 --> <option value="0">选择大洲...</option> <option value="亚洲">亚洲</option> <option value="欧洲">欧洲</option> <option value="美洲">美洲</option> </select> 国家: <select name="country"> <option value="0">选择国家...</option> </select> </form> </div> </body> <script type="text/javascript"> var country=[ ["中国","日本","韩国"], ["英国","德国","法国"], ["美国","巴西","阿根廷"] ]; function sel_country(){ var selContinent=document.form2sel.continent;//获取大洲的下拉选择框对象 var selcountry=document.form2sel.conutry;//获取国家的下拉选择框对象 var arrcont=country[selContinent.selectedIndex-1];//获取大洲对应的国家数组,数组从0开始,所以要-1 // selcountry.length=1; for(var i=0;i<arrcont.length;i++){ var atr=new Option(arrcont[i],arrcont[i]) selcountry[i+1].options.add(atr)//数组还原成下拉列表是,序号从1开始,+1 } } </script> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>三级联动下拉列表框</title> </head> <body> <div id="id-div-center"> <form name="form3sel"> 大洲: <select name="continent" onChange="sel_country()"> <option value="0">选择大洲...</option> <option value="亚洲">亚洲</option> <option value="欧洲">欧洲</option> <option value="美洲">美洲</option> </select> 国家: <select name="country" onChange="sel_city()"> <option value="0">选择国家...</option> </select> 城市: <select name="city"> <option value="0">选择城市...</option> </select> </form> </div> </body> <script type="text/javascript"> var country=[ ["中国","日本","韩国"], ["英国","德国","法国"], ["美国","巴西","阿根廷"] ]; var city=[ [["北京","伤害","广州"],["东京","大阪","名古屋"],["首尔","仁用","济州"]], [["伦敦","曼彻斯特","2"],["3","4","5"],["6","7","8"]], [["9","10","11"],["12","13","14"],["15","16","17"]] ]; function sel_country(){ var selContinent=document.form3sel.continent;//州 var selCountry=document.form3sel.country;//国家 var selCity=document.form3sel.city;//城市 var arrContinentCountry=country[selContinent.selectedIndex-1] selCountry.length=1;//清空国家 selCity.length=1;//清空城市 for(var i=0;i<arrContinentCountry.length;i++){ selCountry[i+1]=new Option(arrContinentCountry[i],arrContinentCountry[i])//将continetn的数值值赋值到selCountry中,完成选择州时国家的变化 } } function sel_city(){ var selContinent=document.form3sel.continent;//州 var selCity=document.form3sel.city;//城市 var selCountry=document.form3sel.country;//国家 var arrCountryCity=city[selCountry.selectedIndex-1] selCity.length=1; for(var i=0;i<arrCountryCity.length;i++){ selCity[i+1]=new Option(arrCountryCity[i],arrCountryCity[i]) } } </script> </html>
三级联动,在二级联动的函数方法中将下拉列表的初始值清零(保留第一项),在二级选项框发生改变时触发三级联动,以此类推四级、五级…
<!doctype html> <html> <head> <meta charset="utf-8"> <title>可输入的下拉列表框</title> </head> <body> <style type="text/css"> div#id-div-center{ position: relative;/*position将元素从页面中分离出来,相对定位*/ width: 320px; height: auto; border: 0px solid black;/* #通过id匹配,对id为id-div-center进行css排版,*/ margin: 32px auto;/*外边距,auto自适应*/ padding: 2px;/*内边距*/ } div#id-div-center span{ overflow: hidden;/*规定当前元素溢出时的处理,hidden内容被修剪,并且被修剪的内容没有滚轮,看不到*/ margin-left: 100px; width:18px; } div#id-div-center select{ width: 128px; margin-left: -100px; } div#id-div-center input{ position: absolute;/*绝对定位,脱离文档流的布局*/ width: 105px; height: 14px; left: 98px; } </style> <div id="id-div-center" style=""> <span style=""> <select id="id-sel" onChange="sel_input(this.id)"> <option value="html">HTML</option> <option value="js">JS</option> <option value="css">CSS</option> </select> </span> <input id="id-input" style=""> </div> </body> <script type="text/javascript"> function sel_input(thisid){ var sel=document.getElementById(thisid); var input=document.getElementById("id-input") input.value=sel.options[sel.selectedIndex].text; } </script> </html>
这个css布局没写好,经验不足