菜鸟问题：有两个select 组件选择一个的一项自动增加到另一个里面

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

//双击移动项目<form>
  <select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
    <option value=A>aaaaaaaaaa
    <option value=B>bbbbbbbbbb
    <option value=C>cccccccccc
    <option value=D>dddddddddd
    <option value=E>eeeeeeeeee
    <option value=F>ffffffffff
    <option value=G>gggggggggg
    <option value=H>hhhhhhhhhh
  </select>
  <select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
  </select>
</form><script language="JavaScript"><!--
function moveOption(e1, e2){
    try{
        var e = e1.options[e1.selectedIndex];
        e2.options.add(new Option(e.text, e.value));
        e1.options.remove(e1.selectedIndex);
    }   catch(e){}
}
//--></script>

Answer 2

<script language="JavaScript">
<!--
function s(n,m){
var a=eval("document.form1.s"+n)
var b=eval("document.form1.s"+m)
b.options[b.options.length]=new Option(a.options[a.selectedIndex].text,a.options[a.selectedIndex].value)
a.options[a.selectedIndex]=null;
}
//-->
</script>
<form method="POST" action="--WEBBOT-SELF--" name="form1">
  <select size="5" name="s1" ondblclick="s(1,2)">
    <option id="a1" value="1">1asdasddasd</option>
    <option >2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <select size="5" name="s2" ondblclick="s(2,1)">
    <option id="a2" value="1">1asdasddasd</option>
    <option >2</option>
    <option>3</option>
    <option>4</option>
  </select></p>
</form>