如何提高multiple 多选列表框的大量数据移动到另一个列表框效率

本文介绍了一个使用JavaScript实现的多选框操作功能,包括将选项从一个选择框移动到另一个选择框的方法,并通过运行时间来评估性能。文中提供了具体的JavaScript函数实现及HTML页面布局。
<script language="javascript">
//usage
/*
//start
RunTime("s");
//your code
//end
RunTime("f");

*/
var start_time;
var finish_time;
function RunTime(flag,show_id){
    if (flag == "start" || flag == "s"){
        start_time = new Date();
    }else if (flag == "finish" || flag == "f" || flag == "end"){
        finish_time = new Date();
        var mms = finish_time.getTime() - start_time.getTime();
        var ms = mms/1000;
        var m = parseInt(ms/60);
        var s = parseInt(ms%60);       
        var show = mms + " ms" + "<br>" + ms + " seconds <br>" + m + " minutes " + s + " seconds";
        var show_alert = mms + " ms /n" + ms + " seconds /n" + m + " minutes " + s + " seconds";
        if (typeof show_id != "undefined")
            document.getElementById(show_id).innerHTML = show;
        else alert(show_alert);
    }
}
</script>

<script>
function $$(id){
    return document.getElementById(id);
}
//change mult select
function moveItem(SourceID,TargetID)
{
    /**************************************************/
    //start time
    RunTime("s");
    /**************************************************/
   
    var objSource = document.getElementById(SourceID);
    var objTarget = document.getElementById(TargetID);
    var i,j,k,n,m,sValue,sText;
    i=0;j=0;k=0;
    var temp=0;
    var TextArray = new Array();
    var ValueArray = new Array();
    for (i=0;i<objSource.length;i++) {
        if (objSource.options[i].selected==true&&objSource.options[i].value!="0") {
            TextArray[j] = objSource.options[i].text;
            ValueArray[j] = objSource.options[i].value;
            i--;
            objSource.options[objSource.selectedIndex] = null;
            j++;
        }
    }
    for (n=0;n<j;n++) {
        sText = TextArray[n];
        sValue = ValueArray[n];
        oOption = new Option();
        oOption.text = sText;
        oOption.value = sValue;
        for (m=0;m<objTarget.length;m++) {
            if (objTarget.options[m].value==sValue)
                temp++;
        }
        if (temp==0)
            objTarget.options[objTarget.length] = oOption;
        temp=0;
    }
    /**************************************************/
    RunTime("f","show_time");
    //end time
   
    /**************************************************/
 // todayDate=new   Date(); 
  //today=todayDate.getSeconds();
  //alert(todayDate.getMinutes()+"分"+today+"秒");
}
/*function moveItem(SourceID,TargetID){
todayDate=new   Date(); 
today=todayDate.getSeconds();
alert(todayDate.getMinutes()+"分"+today+"秒");

    var e1 = document.getElementById(SourceID);
    var e2 = document.getElementById(TargetID);   
   
    pos_sel_start=e2.outerHTML.indexOf('</SELECT>');
    tem_sel=e2.outerHTML.substr(0,pos_sel_start);
   
 for(var i=0;i<e1.options.length;i++){
  if(e1.options[i].selected){
   var e = e1.options[i];
   option_str="<option value='"+e.value+"'>"+e.text+"</option>";
   tem_sel=tem_sel+option_str;
 
   e1.remove(i);
   i=i-1;  
 
  }
 }
tem_sel=tem_sel+'</SELECT>';

e2.outerHTML=tem_sel;
todayDate=new   Date(); 
today=todayDate.getSeconds();
alert(todayDate.getMinutes()+"分"+today+"秒");
}
*/
//20080527 modify by dongxind
/*function moveItem(sourceID, targetID)
{
//todayDate=new   Date(); 
//today=todayDate.getSeconds();
//alert(todayDate.getMinutes()+"分"+today+"秒");

var_select="#"+sourceID+" option:selected";
//alert (" <b>Multiple:</b> " + $("#"+sourceID).val().join(","));
//var i=1;
   $(var_select).each(function (index, domEle) {
      // domEle == this
     // $(domEle).clone().appendTo$("#"+targetID);
       option_str="<option value='"+$(domEle).val()+"'>"+$(domEle).text()+"</option>";
         $("#"+targetID).prepend(option_str);
    $(domEle).remove();
      //i++
     
    });
//    todayDate=new   Date(); 
//today=todayDate.getSeconds();
//alert(todayDate.getMinutes()+"分"+today+"秒");
//alert(i);
}*/
</script>
<table border="0" id="duallist" class="panel ac" width="500" cellpadding="0" cellspacing="0">
        <tr>
            <td class="p0" width="45%">
            未关联    <br>           
                <select multiple name="user_unsel" id="user_unsel" size="7" class="role_select"   ondblclick="checkUserDetail(this)">
                    <?php
                    for ($i=0;$i<7000;$i++){
                        echo "<option value='{$i}'>{$i}</option>";
                    }
                    ?>
                </select></td>
            <td align="center" width="10%"><input type="button" class="buttonk" onClick="moveItem('user_unsel', 'user_sel')" value="-->"><br><br>
                <input type="button" class="buttonk" onClick="moveItem('user_sel', 'user_unsel')" value="<--"></td>
            <td width="45%">已关联            <br>
                <select  multiple name="user_sel[]" id="user_sel" size="7" class="role_select" ondblclick="checkUserDetail(this)">
                   
                </select></td>
        </tr>
</table>   
<div id="show_time"></div>
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值