Js国家城市下拉菜单，左右选择框，功能强大

发布时间：2018-08-23 00:37:56 所属栏目：政策来源：站长网

导读：Js国家城市下拉菜单，左右选择框，像人才招聘网站上的，可以多选或单选职位，现在好像都这么用了，初次写没怎么美化，样子看下去有点粗糙，里面的城市可以自己添，只写出了框架，时间关系，供Fanser参考。演示： htmlheadmeta http-equiv=Content-Type

　　Js国家城市下拉菜单，左右选择框，像人才招聘网站上的，可以多选或单选职位，现在好像都这么用了，初次写没怎么美化，样子看下去有点粗糙，里面的城市可以自己添，只写出了框架，时间关系，供Fanser参考。

　　演示：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>国家下拉菜单，JS下拉菜单 www.veryhuo.com</title> </head> <body> <table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="150"> <form name="frm"> <select id="leftSel" name="s1" size="10" multiple style="width:100%" onchange="redirec(document.frm.s1.options.selectedIndex)"> <option value="0">辽宁</option> <option value="0">黑龙江</option> <option value="0">吉林</option> <option value="0">河北</option> </select> </form> </td> <td width="50" valign="middle"> <p style="width:100%" align="center"><input type="button" value="添加" onclick="addPro()"></p> <p style="width:100%" align="center"><input type="button" value=">>" onclick="moveRight()"></p> <p style="width:100%" align="center"><input type="button" value="<<" onclick="moveLeft()"></p> <p style="width:100%" align="center"><input type="button" value="全部右移" onclick="moveAllright()"></p> <p style="width:100%" align="center"><input type="button" value="全部左椅" onclick="moveAllleft()"></p> <p style="width:100%" align="center"><input type="button" value="删除" onclick="removeSel()"></p> <p style="width:100%" align="center"><input type="button" value="删除全部" onclick="delAll()"></p> </td> <td width="150"> <select id="rightSel" size="10" multiple style="width:100% "></select> </td> </tr> <tr> <td align="center"></td> <td align="center"></td> <td align="center"> <input type="reset" onClick="javascript:window.location.reload();" value="重置"> <input type="button" value="提交"> </td> </tr> </table> <script> var Z = function(id){ if (document.getElementById(id)){ return document.getElementById(id) } else{ alert("not found object"); } } var leftSel = Z("leftSel"); var rightSel = Z("rightSel"); function removeSel(){ if(leftSel.selectedIndex > -1){ for(i=0;i<leftSel.options.length;i++){ if(leftSel.options[i].selected){ leftSel.remove(i); i = i - 1; } } } if(rightSel.selectedIndex > -1){ for(i=0;i<rightSel.options.length;i++){ if(rightSel.options[i].selected){ rightSel.remove(i); i = i - 1; } } } } function removeAll(){ for(i=0;i<leftSel.options.length||i<rightSel.options.length;i++){ leftSel.remove(i)||rightSel.remove(i); i = i - 1; } } function delAll(){ for(i=0;i<leftSel.options.length||i<rightSel.options.length;i++){ leftSel.remove(i)||rightSel.remove(i); i = i - 1; } } function moveRight(){ for(i=0;i<leftSel.options.length;i++){ if(leftSel.options[i].selected){ rightSel.appendChild(leftSel.options[i]); i = i - 1; } } } function moveLeft(){ for(i=0;i<rightSel.options.length;i++){ if(rightSel.options[i].selected){ leftSel.appendChild(rightSel.options[i]); i = i - 1; } } } function moveAllright(){ for(i=0;i<leftSel.options.length;i++){ rightSel.appendChild(leftSel.options[i]); i = -1; } } function moveAllleft(){ for(i=0;i<rightSel.options.length;i++){ leftSel.appendChild(rightSel.options[i]); i = -1; } } function addPro(){ var name = prompt(); if(name == null || name ==""){ alert("内容不能为空"); } else{ var opt = document.createElement("option"); leftSel.appendChild(opt); opt.innerHTML = name; } } //联动 var leftLen = leftSel.options.length; var s2 = new Array(leftLen); for(i=0;i<leftLen;i++){ s2[i] = new Array(); } s2[0][0] = new Option("厦门",""); s2[0][1] = new Option("福州",""); s2[0][2] = new Option("南平",""); s2[1][0] = new Option("龙岩",""); s2[1][1] = new Option("宁德",""); s2[1][2] = new Option("泉州",""); s2[2][0] = new Option("龙岩1",""); s2[2][1] = new Option("宁德2",""); s2[2][2] = new Option("泉州3",""); s2[3][0] = new Option("龙岩4",""); s2[3][1] = new Option("宁德5",""); s2[3][2] = new Option("泉州6",""); function redirec(x){ for(i=0;i<s2[x].length;i++) { rightSel.options[i] = new Option(s2[x][i].text,s2[x][i].value); } rightSel.options[0].selected = true; } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!