欢迎光临
我们一直在努力

(排序,连选,跳选多项Option)下拉列表框1<=>下拉列表框(改进版)

建站超值云服务器,限时71元/月

说明: 是 上 一 回 程 式 的 改 进 版!
本程式支持排序,shift和ctrl功能!(即:连选和跳选多项option)
可以任意的相互操作(下拉列表框1<=>下拉列表框2)!

如果多维数组复杂,可以自己写一个排序函数!
javascript中sort()所传的参数为数组的俩个record(我的定义),默认按
字符排序。
排序所传的参数也为一个数组,例数组a 为下所示:
      a[0][0]=1;
      a[0][1]=2;    
      a[0][2]=3;
      a[0][3]=4;

      a[1][0]=1;
      a[1][1]=2;    
      a[1][2]=3;
      a[1][3]=4;

      a[2][0]=1;
      a[2][1]=2;    
      a[2][2]=3;
      a[2][3]=4;    
每次所传的参数为下:      
a[0]={1,2,3,4}
a[1]={1,2,3,4}

。。。。。。。
那么自己根据要求就可以对传来的参数数组(实际为数组中的record)
中的某一个field进行排序!

select.htm
<html>
<head>
<meta content="text/html; charset=gb2312" http-equiv=content-type>
<link rel="stylesheet" href="common.css">
</head>
<body bgcolor=skyblue>
<form action="select.htm" method="post" name="myform">
<br><br><br>
<div align="center"><center><left>    
<table style="font-size: smaller">
  <tr><td>
   <table>
   <tr><td>
   <select name="left_select" style="height: 200px; width: 100px" multiple>
           <option value="a">a</option><option value="b">b</option>
           <option value="c">c</option><option value="d">d</option>
           <option value="e">e</option><option value="f">f</option>
           <option value="g">g</option><option value="h">h</option>
           <option value="i">i</option><option value="j">j</option>
           <option value="k">k</option><option value="l">l</option>
           <option value="m">m</option><option value="n">n</option>
           <option value="o">o</option><option value="p">p</option>
   </select>
   </td></tr>
   </table>
   </td><td>
   <table border="0">
   
   <br>
   <tr><td>
   <input language="javascript" name="btn_select_addany" onclick="fun_select_addany(document.myform)" style="color: blue; font-family: webdings; font-size: 12pt; font-weight: normal; height: 28px; width: 27px" title="add any" type=button value="8"></td></tr><tr><td>
   <input language="javascript" name="btn_select_addall" onclick="fun_select_addall(document.myform)" style="color: blue; font-family: webdings; font-size: 12pt; font-weight: normal; height: 28px; width: 27px" title="add all" type=button value=: designtimesp="17713"></td></tr><tr><td>
   <br><br></td></tr><tr><td>
   <input language="javascript" name="btn_select_dltany" onclick="fun_select_dltany(document.myform)" style="color: blue; font-family: webdings; font-size: 12pt; font-weight: normal; height: 28px; width: 27px" title ="delete any" type=button value="7"></td></tr><tr><td>
   <input language="javascript" name="btn_select_dltall" onclick="fun_select_dltall(document.myform)" style="color: blue; font-family: webdings; font-size: 12pt; font-weight: normal; height: 28px; width: 27px" title ="delete all" type=button value="9"></td></tr>
   <tr><td></td></tr>
   <tr><td>
   </td></tr>
   </table></td><td>   
   <table style="font-size: smaller">
   <tr><td>
   <select name="right_select" style="height: 200px; width: 100px" multiple>
   </select>
   </td></tr>
   </table>
   </td></tr></tbody></table></div></center>
</form>   
</body>
</html>
          
<script language="javascript">
function fun_select_addany(theform){
    var i;
    for (i=0;i<theform.left_select.length;i++){
        if (theform.left_select.options[i].selected == true){
           theform.right_select.options[theform.right_select.length]=new option(theform.left_select.options[i].text);
           theform.left_select.options.remove(i);
           i–;
        }
    }
    sort_select(document.myform);
}

function fun_select_addall(theform){
    var i;   
    for (i=0;i<theform.left_select.length;i++){
        theform.right_select.options[theform.right_select.length]=new option(theform.left_select.options[i].text);    
    }
    theform.left_select.length=0;     
    sort_select(document.myform);
}  

function fun_select_dltany(theform){
   var i;
   for (i=0;i<theform.right_select.length;i++){
       if (theform.right_select.options[i].selected == true){
          theform.left_select.options[theform.left_select.length]=new option(theform.right_select.options[i].text);
          theform.right_select.options[i] =new option("");
          theform.right_select.options.remove(i);
          i–;
       }
   }
   sort_select(document.myform);
}

function fun_select_dltall(theform){
    var i;   
    for (i=0;i<theform.right_select.length;i++){
        theform.left_select.options[theform.left_select.length]=new option(theform.right_select.options[i].text);
    }
    theform.right_select.length=0;            
    sort_select(document.myform);
}

function sort_select(theform){
    var i;
    var left_array= new array();
    var right_array = new array();                    
    for (i=0;i<theform.left_select.length;i++){
        left_array[i] = new array(theform.left_select.options[i].text);
    }
    for (i=0;i<theform.right_select.length;i++){
        right_array[i] = new array(theform.right_select.options[i].text);
    }
left_array.sort();
    right_array.sort();
    theform.left_select.length=0;
    theform.right_select.length=0;            
    
    for (i=0;i<left_array.length;i++){
        theform.left_select.options[theform.left_select.length]=new option(left_array[i]);
    }
    for (i=0;i<right_array.length;i++){
        theform.right_select.options[theform.right_select.length]=new option(right_array[i]);
    }
    left_array= new array();
    right_array = new array();      
}   
</script>

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » (排序,连选,跳选多项Option)下拉列表框1<=>下拉列表框(改进版)
分享到: 更多 (0)

相关推荐

  • 暂无文章