麻烦js高手

duobiao 2009-12-10 10:32:07

功能是这样的，有两个列表框
第一个列表框中有如下数据：
c_product
c_month
n_uniprice
n_quantity
n_discount
c_customer
c_product_id
从第一个列表框往第二个列表框中移数据
比如说移动了n_uniprice，c_customer

那么从第二个列表框往第一个列表框移动c_customer和n_uniprice时，可以用什么方法，才能保证移动回去后，第一个列表框还是按照原顺序排列呢？

求助！！

...全文

124 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

No_Data_Found 2009-12-10

打赏
举报

可以用什么方法，才能保证移动回去后，第一个列表框还是按照原顺序排列呢？

---------------------

定义变量保存列表各项的位置移动后再排序

参考

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<style type="text/css">

<!--

* {

    font: 9pt/150% "宋体";

}

-->

</style></head>



<body>

<table width="653" border="0" cellspacing="0" cellpadding="0">

  <tr align="center">

    <td width="201" height="108">

      <select id="s1" size="10" multiple style="width:150" ondblclick="moveSelect('s1','s2')">

      <option value="1">11111</option>

      <option value="2">22222</option>

      <option value="3">33333</option>

      <option value="4">44444</option>

      <option value="5">55555</option>

      <option value="6">66666</option>

      <option value="7">77777</option>

      <option value="8">88888</option>

    </select></td>

    <td width="83">

    <input type="button" onclick="moveAll('s1','s2')" value=">>">

      <br>

    <input type="button" onclick="moveSelect('s1','s2')" value="->">

    <br>

    <input type="button" onclick="moveSelect('s2','s1')" value="<-">

    <br>

    <input type="button" onclick="moveAll('s2','s1')" value="<<"></td>

    <td width="212">

    <select id="s2" size="10"  multiple style="width:150" ondblclick="moveSelect('s2','s1')">

      <option value="A">AAAAA</option>

      <option value="B">BBBBB</option>

      <option value="C">CCCCC</option>

      <option value="D">DDDDD</option>

      <option value="E">EEEEE</option>

      <option value="F">FFFFF</option>

    </select></td>

    <td width="157">

      <input type="button" onclick="moveTop('s2')" value="Top">

      <br>

      <input type="button" onclick="moveUp('s2')" value="Up">

      <br>

      <input type="button" onclick="moveDown('s2')" value="Down">

      <br>

      <input type="button" onclick="moveBottom('s2')" value="Bottom"></td>

  </tr>

</table>

<input type="button" onclick="t1.value=s1.outerHTML" value="察看S1">

<input type="button" onclick="t2.value=s2.outerHTML" value="察看S2">

<br>

<textarea name="t1" cols="50" rows="10"></textarea>

<textarea name="t2" cols="50" rows="10"></textarea>

</body>

<script language="javascript">

  /*oS(String)：源select的id

  *oT(String)：目标select的id

  */

  function moveSelect(oS,oT)

    {oS=document.getElementById(oS);

    oT=document.getElementById(oT);

    var count=oS.length;

    if(count==0)

      {alert("已经没有项目可以移动");

        return false

      }

    if(oS.selectedIndex==-1)

      {alert("必须选择要移动的项目");

        return false

      }

    var selected=new Array();

    var j=0;

    var o=null

    for(var i=0;i<oS.length;i++)

      if(oS[i].selected)

        {o=oS[i].cloneNode(true);

          oT.appendChild(o);

          selected[j++]=oS[i];

        }

    for(var i=0;i<j;i++)

      selected[i].removeNode(true);

    }



  function moveAll(oS,oT)

    {oS=document.getElementById(oS);

    oT=document.getElementById(oT);

    var count=oS.length;

    if(count==0)

      {alert("已经没有项目可以移动");

        return false

      }

    var o=null

    for(var i=0;i<count;i++)

      {o=oS[i].cloneNode(true);

        oT.appendChild(o);

      }

    while(oS.length!=0)

      oS[oS.length-1].removeNode(true);

    }

  //o(String):要控制的select的id

  function moveTop(o)

    {o=document.getElementById(o);

    if(o.selectedIndex==-1)

      {alert("必须选择要移动的项目");

        return false

      }

    if(o.selectedIndex==0)

      {alert("无法再向上移动！");

        return false

      }

    for(var i=o.selectedIndex;i>0;i--)

      o[i].swapNode(o[i-1]);

    }

  

  function moveUp(o)

    {o=document.getElementById(o);

    if(o.selectedIndex==-1)

      {alert("必须选择要移动的项目");

        return false

      }

    if(o.selectedIndex==0)

      {alert("无法再向上移动！");

        return false

      }

    var i=o.selectedIndex;

    o[i].swapNode(o[i-1]);

    }

  

  function moveDown(o)

    {o=document.getElementById(o);

    if(o.selectedIndex==-1)

      {alert("必须选择要移动的项目");

        return false

      }

    if(o.selectedIndex==o.length-1)

      {alert("无法再向下移动！");

        return false

      }

    var i=o.selectedIndex;

    o[i].swapNode(o[i+1]);

    }



  function moveBottom(o)

    {o=document.getElementById(o);

    if(o.selectedIndex==-1)

      {alert("必须选择要移动的项目");

        return false

      }

    var l=o.length-1

    if(o.selectedIndex==l)

      {alert("无法再向下移动！");

        return false

      }

    for(var i=o.selectedIndex;i<l;i++)

      o[i].swapNode(o[i+1]);

    }

</script>

</html>