0顶

一个左右联动,国家地区选择的表单特效

稿源：互联网 2022-04-02 21:40:12 点击： 6589 撤稿纠错

可以左右选择的地区表单...

以下讨论的是和表单特效相关的一个左右联动,国家地区选择的表单特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Power by orzzo.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>

关于一个左右联动,国家地区选择的表单特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011032368825.shtml方便下次再访问哦。

·上一篇： 再点击一次，图片又换回来的效果
·下一篇： 用 Javascript 实现锚点(Anchor)间平滑跳转

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

一个左右联动,国家地区选择的表单特效

文章分类LIST >>返回首页

最新游戏

最新新闻