论坛首页 → Web前端技术论坛 →

用自定义按钮控制multiple型select元素的上下移动

浏览 4854 次
锁定老帖子 主题：用自定义按钮控制multiple型select元素的上下移动
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • danlley
  • 等级: 一星会员
  • 性别:
  • 文章: 19
  • 积分: 150
  • 来自: 西安
   发表时间：2007-11-21  

写JS脚本最烦心之处莫过于由于浏览器标准不统一导致的程序复杂性，现在，尽管已经有很多AJAX框架对各种浏览器的区分都做了封装，但现实中一些小问题的处理上，考虑使用这些东西似乎不太现实。这几天，刚好需要做一个小小的demo页面其中有些东西刚好可以写出来以备后用。

需求如下：

1.现有一select框，代码如下：

xml 代码
  1. <select name="hasitem" multiple size=19>  
  2.     <option selected>t-mobile game restrictionsoption>  
  3.     <option>  
  4.                        
  5.                        
  6.                        
  7.                        
  8.     option>  
  9.     <option>gdsfgdsfgdsgoption>  
  10.     <option>q2432342rewe432option>  
  11.     <option>2dfaesr34option>  
  12.     <option>t-mobile game restrictionsoption>  
  13.     <option>436t43ret4343option>  
  14.     <option>t-mobile game restrictionsoption>  
  15.     <option>545435353453option>  
  16.     <option>t-mobile game restrictionsoption>  
  17.     <option>fdsgdggtrgregoption>  
  18.     <option>t-mobile game restrictionsoption>  
  19.     <option>5756432534543option>  
  20.     <option>t-mobile game restrictionsoption>  
  21.     <option>ggfy456454343option>  
  22.     <option>t-mobile game restrictionsoption>  
  23. select>  

 

2.有两个按钮，通过这两个按钮的点击事件来控制select框中内容的上下移动。

xml 代码
  1. <input name="buttong_04" type="button" value="up" class="button2" onClick="moveup();"><br>  
  2. <input name="buttong_05" type="button" value="down" class="button2" onClick="movedown();">  

 

开始时，也没有太多留意只是从网上找找源码三两改，用IE打开进行测试，似乎没有什么问题，调试代码如下：

xml 代码
  1. function moveup(){   
  2.     var select_body =document.forms[0].hasitem;   
  3.     if(select_body.selectedIndex != -1){   
  4.         var flag = select_body.selectedIndex;   
  5.         if(flag==0){   
  6.             alert("The Rule has already at the top level!");   
  7.             return;   
  8.         }   
  9.         for(var i = 0; i < select_body.length ; i ++){   
  10.             if(select_body.options[i].selected){   
  11.                 var nOptionu = document.createElement("option");   
  12.                 var nOptiond = document.createElement("option");   
  13.                 nOptionu.text = select_body.options[i].text;   
  14.                 nOptionu.value = select_body.options[i].value;   
  15.                 nOptiond.text = select_body.options[i-1].text;   
  16.                 nOptiond.value = select_body.options[i-1].value;   
  17.                 select_body.remove(i);   
  18.                 select_body.remove(i-1);   
  19.                 document.forms[0].hasitem.add(nOptionu,i-1);   
  20.                 document.forms[0].hasitem.add(nOptiond,i);   
  21.                 select_body.options[i-1].selected=true;   
  22.             }   
  23.         }   
  24.     }else   
  25.         alert("Please select a Rule!");   
  26. }   
  27.   
  28. function movedown(){   
  29.     var select_body =document.forms[0].hasitem;   
  30.     if(select_body.selectedIndex != -1){   
  31.         var flag = select_body.options.length;   
  32.         if(select_body.selectedIndex==flag-1){   
  33.             alert("Already reached bottom!");   
  34.             return;   
  35.         }   
  36.         for(var i = 0; i < select_body.length ; i ++){   
  37.             if(select_body.options[i].selected){   
  38.                 var nOptionu = document.createElement("OPTION");   
  39.                 var nOptiond = document.createElement("OPTION");   
  40.                 nOptiond.text = select_body.options[i].text;   
  41.                 nOptiond.value = select_body.options[i].value;   
  42.                 nOptionu.text = select_body.options[i+1].text;   
  43.                 nOptionu.value = select_body.options[i+1].value;   
  44.                 select_body.remove(i);   
  45.                 document.items.hasitem.add(nOptiond,i+1);   
  46.                 select_body.options[i+1].selected=true;   
  47.                 break;   
  48.             }   
  49.         }   
  50.     }else   
  51.         alert("Please select a Rule!");   
  52. }  

 

由于客户的特殊需求，不管IE是否能够执行，但必须保证Firefox可以执行。在这种变态的要求下，我不得不把我的页面拉到Firefox上调试一次。最终的结果让我大失所望——全乱了，仔细研究了一下问题所在才发现是Firefox不支持add方法，怎么办，得改用其他的方式来实现了，想来想去也只有replace方法或许可以拿来用一下。怀着一种惴惴不安的尝试的心情，我将上面的代码进行了一些改动，具体改动后的内容如下：

js 代码
  1. /**  
  2.  * Author: DanlleyW  
  3.  * Date: 21/11/2007  
  4.  * Comments: only support for Firefox  
  5.  */  
  6. function moveup(){   
  7.     var select_body =document.forms[0].hasitem;   
  8.     if(select_body.selectedIndex != -1){   
  9.         var flag = select_body.selectedIndex;   
  10.         if(flag==0){   
  11.             alert("The Rule has already at the top level!");   
  12.             return;   
  13.         }   
  14.         //alert(select_body.selectedIndex);   
  15.         for(var i = 0; i < select_body.length ; i ++){   
  16.             if(select_body.options[i].selected){   
  17.                 var nOptionu = document.createElement("option");   
  18.                 var nOptiond = document.createElement("option");   
  19.                 nOptionu.text = select_body.options[i].text;   
  20.                 nOptionu.value = select_body.options[i].value;   
  21.                 nOptiond.text = select_body.options[i-1].text;   
  22.                 nOptiond.value = select_body.options[i-1].value;   
  23.                 //below code is support for IE   
  24.                 //select_body.remove(i);   
  25.                 //select_body.remove(i-1);   
  26.                 //below alert statement means the program can remove element successfully   
  27.                 //alert("before: i="+nOptionu.text+"  i-1="+nOptiond.text+"\n after: i="+select_body.options[i].text+"  i-1="+select_body.options[i-1].text);   
  28.                 try{   
  29.                     //now begin   
  30.                     //below code is support for Firefox   
  31.                     var oSel=document.getElementsByTagName("select");   
  32.                     var oOpt=oSel[0].getElementsByTagName("option");   
  33.                     oOpt[i].parentNode.replaceChild(nOptiond,oOpt[i]);   
  34.                     oOpt[i].parentNode.replaceChild(nOptionu,oOpt[i-1]);   
  35.                     //stoped   
  36.                     //below code is support for IE   
  37.                     //document.forms[0].hasitem.add(nOptionu,i-1);   
  38.                     //document.forms[0].hasitem.add(nOptiond,i);   
  39.                     //alert("i="+select_body.options[i].text+"  i-1="+select_body.options[i-1].text);   
  40.                 }catch(e){   
  41.                     alert(e);   
  42.                 }   
  43.                 select_body.options[i-1].selected=true;   
  44.             }   
  45.         }   
  46.     }else  
  47.         alert("Please select a Rule!");   
  48. }   
  49.   
  50. /**  
  51.  * Author: DanlleyW  
  52.  * Date: 21/11/2007  
  53.  * Comments: only support for Firefox  
  54.  */  
  55. function movedown(){   
  56.     try{   
  57.         var select_body =items.hasitem;   
  58.         if(select_body.selectedIndex != -1){   
  59.             var flag = select_body.options.length;   
  60.             if(select_body.selectedIndex==flag-1){   
  61.                 alert("Already reached bottom!");   
  62.                 return;   
  63.             }/*  
  64.             for(var i=select_body.length-1;i>=0;i--){  
  65.                 if(select_body.options[i].selected==true){  
  66.                     select_body.selectedIndex=i;  
  67.                     break;  
  68.                 }  
  69.             }*/  
  70.             for(var i = select_body.length-1; i >=0 ; i--){   
  71.                 if(select_body.options[i].selected){   
  72.                     var nOptionu = document.createElement("option");   
  73.                     var nOptiond = document.createElement("option");   
  74.                     nOptiond.text = select_body.options[i].text;   
  75.                     nOptiond.value = select_body.options[i].value;   
  76.                     nOptionu.text = select_body.options[i+1].text;   
  77.                     nOptionu.value = select_body.options[i+1].value;   
  78.                     try{   
  79.                         var oSel=document.getElementsByTagName("select");   
  80.                         var oOpt=oSel[0].getElementsByTagName("option");   
  81.                         oOpt[i].parentNode.replaceChild(nOptiond,oOpt[i+1]);   
  82.                         oOpt[i].parentNode.replaceChild(nOptionu,oOpt[i]);   
  83.                     }catch(e){   
  84.                         alert("Already reached bottom!"+e);   
  85.                     }   
  86.                     select_body.options[i+1].selected=true;   
  87.                     //break;   
  88.                 }   
  89.             }   
  90.         }else  
  91.             alert("Please select a Rule!");   
  92.     }catch(e){   
  93.         alert("unable go on moving!");   
  94.     }   
  95. }  

代码完成后，调试在Firefox上没问题，但是当我拿到IE上进行测试时，什么都乱了，乱的一团糟。M$居然没有实现该W3C标准。反正也无所谓了，再写一个浏览器判断的方法问题解决。

 

 

 

 
返回顶楼
         
  • gyj129129
  • 等级: 初级会员
  • 性别:
  • 文章: 25
  • 积分: 30
  • 来自: 北京
   发表时间：2007-11-21  
服了.....
返回顶楼
          回帖地址
0 请登录后投票
  • afcn0
  • 等级: 二星会员
  • 性别:
  • 文章: 654
  • 积分: 280
  • 来自: 天津
   发表时间：2007-11-21  
不要不懂乱说,明明就是你胡乱使用js,这样 
<select name="hasitem" id="qqq" multiple size=19>      
    <option>t-mo bile game restrictions</option>      
    <option selected>   aaa   </option>      
    <option>gdsfgdsfgdsg</option>      
    <option>q2432342rewe432</option>      
    <option>2dfaesr34</option>      
    <option>t- mobile game restrictions</option>      
    <option>436t43ret4343</option>      
    <option>t-mob ile game restrictions</option>      
    <option>545435353453</option>      
    <option>t-mobile g ame restrictions</option>      
    <option>fdsgdggtrgreg</option>      
    <option>t-mob ile game restrictions</option>      
    <option>5756432534543</option>      
    <option>t-mobi e game restrictions</option>      
    <option>ggfy456454343</option>      
    <option>t-mob ile game restrictions</option>      
</select>  
<input name="buttong_04" type="button" value="up" class="button2" onClick="moveup();"><br>      
<input name="buttong_05" type="button" value="down" class="button2" onClick="movedown();">      
<script>  
function moveup(){       
    var select_body =document.getElementById("qqq");    
    if(select_body.selectedIndex != -1){       
        var flag = select_body.selectedIndex;       
        if(flag==0){       
            alert("The Rule has already at the top level!");       
            return;       
        }       
//这里加入判断是因为ie下面无法使用insertBefore来调换1号和0号元素,故使用这种方法   
if(select_body.selectedIndex==1&&document.all)   
{   
var temp=select_body[select_body.selectedIndex];   
var t=temp.parentNode;   
temp.parentNode.removeChild(temp);   
setTimeout(function(){   
t.insertBefore(temp,t.options[0]);   
},0)}   
else   
select_body[select_body.selectedIndex].parentNode.insertBefore(select_body[select_body.selectedIndex],select_body[select_body.selectedIndex-1])      
  
    }else       
        alert("Please select a Rule!");       
}       
      
function movedown(){       
    var select_body =document.getElementById("qqq");       
    if(select_body.selectedIndex != -1){       
        var flag = select_body.options.length;       
        if(select_body.selectedIndex==flag-1){       
            alert("Already reached bottom!");       
            return;       
        }       
select_body[select_body.selectedIndex].parentNode.insertBefore(select_body.options[select_body.selectedIndex],select_body.options[select_body.selectedIndex+2])      
    }else       
        alert("Please select a Rule!");       
}      
  
</script>
返回顶楼
          回帖地址
0 请登录后投票
  • danlley
  • 等级: 一星会员
  • 性别:
  • 文章: 19
  • 积分: 150
  • 来自: 西安
   发表时间：2007-11-22  
这样好像没办法支持多选和跳选吧
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics