收集列表框间选项间移动的脚本(阿信)

Question

希望能有用处：
<table width = 520 border =1 align = center>
  <tr>
    <td width = 150 align = center>
      <Select name = Province id = Province size = 7 multiple = true ondblclick ="SelectAll(this)">
        <option value = 1>山东
        <option value = 2>江苏
        <option value = 3>安徽
        <option value = 4>河北
        <option value = 5>河南
        <option value = 6>江西
        <option value = 7>山西
        <option value = 8>陕西
        <option value = 9>宁夏
        <option value = 0>辽宁
      </Select>
    </td>
    <td width = 170 align = center>
      <img src = '../img/create.gif'  style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.Province,document.all.NewProvince)>
      <img src = '../img/release.gif' style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.NewProvince,document.all.Province)>
    </td>
    <td width = 150 align = center>
      <Select name = NewProvince id = NewProvince size = 7 multiple = true ondblclick ="SelectAll(this)">
   
      </Select>
    </td>
    <td width = 170 align = center>
      <img src = '../img/create.gif'  style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.NewProvince,document.all.SecProvince)>
      <img src = '../img/release.gif' style = "cursor:hand;"  border = 0 width = 30 height = 20 onclick = Create(document.all.SecProvince,document.all.NewProvince)>
    </td>
    <td width = 150 align = center>
      <Select name = SecProvince id = SecProvince size = 7 multiple = true ondblclick ="SelectAll(this)">
   
      </Select>
    </td>
  </tr>
  <tr height = 80>
    <td align = center>
       <select id = Sel1>
         <option>AA
         <option>BB
         <option>CC
         <option>AA
         <option>BB
         <option>DD
       </select><br/>Source          
    </td>
    <td colspan = 3 align = center>
       <input type = button value = Add onclick = "Add()">
    </td>
    <td align = center>
      <select id = Sel2>
      </select><br/>Target
    </td>
  </tr>
</table><script language = javascript>
/*
 *多选下拉列表动态增加函数：Create(SourseObject,TargetObject)；
 *参数:SourseObject:表示要动态添加的源Select；
 *参数:TargetObject:表示要动态接受的目的Select；
 *例:Create(document.all.SourSelect,document.all.TarSelect);
 *作者:月影飞鸿 于 2003-05-26晚作
*/
 function Create(SourceSelect,TargetSelect)
 {
    var IsCreate = true;
    var theIndex  = SourceSelect.selectedIndex;
    var theLength = SourceSelect.length ;
    if (theIndex == -1 ) //如果源Select为空的话，则退出过程
        return false;
    while (IsCreate)     //添加到目的Select循环
    {
        theValue = SourceSelect.options[theIndex].text;  //得到所选择的文本
      
        TargetSelect.options.add(new Option(theValue));  //目的Select增加一个文本
     
        theIndex = theIndex + 1;   //如果是选择多列的话，对下一个进行处理
        
        if (theIndex == theLength) //theLength 如果是4的话，则theIndex应该是3，
        {                          //如果两者想等的话，则源Select多了一个值，
            IsCreate = false;      //所以需要退出循环
            break;
        }
        if (SourceSelect.options[theIndex].selected == false)//如果没有被选择的话，则退出循环
        {
            IsCreate = false;
        }
    }    
    
    while (IsCreate == false)                  //删除源select循环
    {
       SecIndex  = SourceSelect.selectedIndex; //动态得到被选择的索引
       theLength = SourceSelect.length ;       //动态得到Select的长度
       SourceSelect.remove(SecIndex);          //删除指定索引的元素
       if (theLength == 1)                     //表示最后一个元素已删除，
           return false;                       //源select空了，退出循环
       if (theLength == SecIndex + 1)          //表示多选的已全部删掉，退出循环
           return false;
       if (SourceSelect.options[SecIndex].selected == false)
       {
           IsCreate = true;
       }
    }
 }
  
 function SelectAll(theSel)  //双击全部选中函数
 { 
    for (i = 0 ;i<theSel.length;i++)
    {
      theSel.options[i].selected = true;    
    }
 }
 
 function Add()
 {
   YesIt = false;
   SelectText = Sel1.options[Sel1.selectedIndex].text;
   for (i = 0 ;i < Sel2.length ; i++)
   {
     if (Sel2.options[i].text == SelectText)
     {
        alert("Target中已经存在！");
        YesIt = true;
     }
   }
   if (YesIt == false)
   {
     Sel2.options.add(new Option(SelectText));
     YesIt = true;
   }
   if (Sel2.length == 0)
   {
     Sel2.options.add(new Option(SelectText));
   }
 }
</script>

Answer 1

<table>
<tr>
<td valign=top>
<select name=s1 multiple size=4 style="width:100">
<option value=1>aaaaaa
<option value=2>bbbbbb
<option value=3>cccccc
<option value=4>dddddd
<option value=5>eeeeee
<option value=6>ffffff
<option value=7>gggggg
<option value=8>hhhhhh
</select>
</td>
<td valign=middle align=center>
<input type=button name=b4 value=">" onClick="move(1)"><br>
<input type=button name=b5 value="<" onClick="move(2)">
</td>
<td valign=top>
<select name=s2 multiple size=4 style="width:100">
</select>
</td>
</tr>
<tr>
<td>
<input type=button name=b1 value=向上 onClick="up()">
<input type=button name=b2 value=向下 onClick="down()">
</td>
<td>
<input type=button name=b3 value=查看 onClick="show()">
</td>
<td>
</td>
</tr>
</table><script>
function up() {
  s = document.all.s1;
  v = new Array();
  for(i=0;i<s.length-1;i++) {
    if(! s.options[i].selected && s.options[i+1].selected) {
      v.value = s.options[i].value;
      v.text = s.options[i].text;
      v.selected = s.options[i].selected;
      s.options[i].value = s.options[i+1].value;
      s.options[i].text = s.options[i+1].text;
      s.options[i].selected = s.options[i+1].selected;
      s.options[i+1].value = v.value;
      s.options[i+1].text = v.text;
      s.options[i+1].selected = v.selected;
    }
  }
}function down() {
  s = document.all.s1;
  v = new Array();
  for(i=s.length-1;i>0;i--) {
    if(! s.options[i].selected && s.options[i-1].selected) {
      v.value = s.options[i].value;
      v.text = s.options[i].text;
      v.selected = s.options[i].selected;
      s.options[i].value = s.options[i-1].value;
      s.options[i].text = s.options[i-1].text;
      s.options[i].selected = s.options[i-1].selected;
      s.options[i-1].value = v.value;
      s.options[i-1].text = v.text;
      s.options[i-1].selected = v.selected;
    }
  }
}function show() {
  s = document.all.s1;
  v = "";
  for(i=0;i<s.length;i++)
    v += s.options[i].value + ":" + s.options[i].text + "\n";
  alert(v);
}function move(m) {
  if(m == 1) {
    ss1 = document.all.s1;
    ss2 = document.all.s2;
  }
  if(m == 2) {
    ss1 = document.all.s2;
    ss2 = document.all.s1;
  }
  v = new Array();
  k = 0;
  for(i=0;i<ss1.length;i++) {
    if(ss1.options[i].selected) {
      ss2.options[ss2.length] = new Option(ss1.options[i].text,ss1.options[i].value);
      v[k] = i;
      k++;
    }
  }
  for(i=v.length-1;i>=0;i--)
    ss1.options[v[i]] = null;
}
</script>

Answer 2

多谢唠叨。如果只在ie下运行，上移下移为何不用swapNode?

Answer 3

阿信大哥,还有楼上的各位大哥能不能帮小弟看下这个问题,谢谢了!!http://expert.csdn.net/Expert/topic/2140/2140152.xml?temp=.7571222

Answer 4

上移下移为何不用swapNode因为swapNode是dhtml方法，而我用的是js的基本方法。从ie3.0和nts2.0就支持了