Js国家城市下拉菜单，左右选择框

 首页 > 网页特效 > 表单按钮 > Js国家城市下拉菜单，左右选择框

Js国家城市下拉菜单，左右选择框

 2018-07-07  472  收藏  0 赞一个  0 真差劲  0 去评论

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>国家下拉菜单，JS下拉菜单</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>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

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

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行