互动的多项选择

 <table border="0" cellpadding="0" cellspacing="0" style="width: 98%; height: 100%">
                        <tr>
                            <td style="height: 30px">
                                待选择列表
                                <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox2_CheckedChanged"
                                    Text="查看所有" Visible="False" /></td>
                            <td width="40">
                            </td>
                            <td>
                                已选择的列表</td>
                        </tr>
                        <tr>
                            <td>
                            <select id="SelectingItem" runat="server" multiple style="width: 200px;
                                    height: 230px">
                            </select>
                                &nbsp;</td>
                            <td width="40">
                                <input id="Button2" onclick="SelectUnit(form1.SelectingItem,form1.selectedItem,true)" runat="server" style="width: 25px" type="button" value=">>" /><br />
                                <br />
                                <input id="Button3" onclick="SelectUnit(form1.SelectingItem,form1.selectedItem,false)" runat="server" style="width: 25px" type="button" value=">" />
                                <br />
                                <br />
                                <input id="Button4" onclick="SelectUnit(form1.selectedItem,form1.SelectingItem,false)" runat="server" style="width: 25px" type="button" value="<" /><br />
                                <br />
                                <input id="Button5" onclick="SelectUnit(form1.selectedItem,form1.SelectingItem,true)" runat="server" style="width: 25px" type="button" value="<<" /></td>
                            <td>
                            <select id="selectedItem" runat="server" multiple style="width: 200px;
                                    height: 230px">
                                </select>
                                <input id="HiddenText" runat="server" name="HiddenText" type="hidden" style="width: 13px" />
                                <input id="HiddenValue" runat="server" name="HiddenValue" type="hidden" style="width: 16px" />
                            </td>
                        </tr>
                    </table>

 

//取得选择的值

function GetValue()
    {
    document.form1.HiddenText.value="";
    document.form1.HiddenText.value="";
       for(i=document.form1.selectedItem.options.length-1;i>=0;i--)
       {
        document.form1.HiddenText.value+=":"+document.form1.selectedItem.item(i).text;
        document.form1.HiddenValue.value+=":"+document.form1.selectedItem.item(i).value;
       }
    }

 function SelectUnit(list1,list2,selectall)
    {
    
        var i,l;
        if(selectall)
        {
            for(i=list1.options.length-1;i>=0;i--)
            {
             var selectItems=window.Option.create(list1.item(i).text,list1.item(i).value);
             list2.add(selectItems);
            }
          
        }
        else
        {
          if(list1.SelectedIndex != -1)
          {
            for(i=list1.options.length-1;i>=0;i--)
            {
                if(list1.item(i).selected)
                {
                    var selectSingle=window.Option.create(list1.item(i).text,list1.item(i).value);
                    list2.add(selectSingle);
                }
            }
          }
        }
       
        for(i=0;i<list2.options.length;i++)
        {
            for(l=0;l<list1.options.length;l++)
            {
                if(list2.options[i].innerText==list1.options[l].innerText)
                {
                 list1.options.remove(l);
                }
            }
        }
    }