兩個可以互相挑選的ListBox(2.0適用)

摘要 :
兩個ListBox,A的ListBox可以挑到B的ListBox,B的ListBox可以挑到A的ListBox

---

先拉兩個ListBox,及兩個Button,Button為可以執行互相挑選的動作(左移或右移)

<table>
                <tr>
                    <td rowspan="2">
                        <asp:ListBox ID="ListBox1" runat="server" Width="100px" SelectionMode="Multiple">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                            <asp:ListItem>4</asp:ListItem>
                            <asp:ListItem>5</asp:ListItem>
                        </asp:ListBox>
                    </td>
                    <td width="50" align="center">
                        <asp:Button ID="Button1" runat="server" Text=">>" />
                    </td>
                    <td rowspan="2">
                        <asp:ListBox ID="ListBox2" runat="server" Width="100px" SelectionMode="Multiple"></asp:ListBox>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <asp:Button ID="Button2" runat="server" Text="<<" /></td>
                </tr>
            </table>

在code方面,註冊一個Javascript function,此function為左移或右移的function
最後設定兩個Button的OnClientClick屬性,就可以兩個ListBox互相挑選了

protected void Page_Load(object sender, EventArgs e)
    {
        if(!this.IsPostBack)
        {
            string strMoveOptionScript = "";
            strMoveOptionScript += "<script>\n";
            strMoveOptionScript += "function MoveOption(id1,id2){\n";
            strMoveOptionScript += "  for(i=0;i<document.getElementById(id1).options.length;i++){\n";
            strMoveOptionScript += "    if(document.getElementById(id1).options[i].selected)\n";
            strMoveOptionScript += "      document.getElementById(id2).options[document.getElementById(id2).options.length]=new Option(document.getElementById(id1).options[i].text,document.getElementById(id1).options[i].value);\n";
            strMoveOptionScript += "  }\n";
            strMoveOptionScript += "  for(i=0;i<document.getElementById(id1).options.length;i++){\n";
            strMoveOptionScript += "    if(document.getElementById(id1).options[i].selected){\n";
            strMoveOptionScript += "      document.getElementById(id1).options[i]=null;\n";
            strMoveOptionScript += "      i--;\n";
            strMoveOptionScript += "    }\n";
            strMoveOptionScript += "  }\n";
            strMoveOptionScript += "}\n";
            strMoveOptionScript += "</script>";

            this.ClientScript.RegisterClientScriptBlock(this.GetType(), "MoveOption", strMoveOptionScript);

            this.Button1.OnClientClick = "MoveOption('" + this.ListBox1.ClientID + "','" + this.ListBox2.ClientID + "');return false;";
            this.Button2.OnClientClick = "MoveOption('" + this.ListBox2.ClientID + "','" + this.ListBox1.ClientID + "');return false;";
        }
    }

另一種寫法

<script language="JavaScript">
function MoveOption(id1,id2){
for(i=0;i<document.getElementById(id1).options.length;i++){
if(document.getElementById(id1).options[i].selected)
document.getElementById(id2).options[document.getElementById(id2).options.length]=new Option(document.getElementById(id1).options[i].text,document.getElementById(id1).options[i].value);
}
for(i=0;i<document.getElementById(id1).options.length;i++){
if(document.getElementById(id1).options[i].selected){
document.getElementById(id1).options[i]=null;
i--;
}
}
}
</script>

<table> 
<tr>
<td rowspan="2">
<asp:ListBox ID="ListBox1" runat="server" Width="100px" SelectionMode="Multiple"> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
<asp:ListItem>4</asp:ListItem> 
<asp:ListItem>5</asp:ListItem> 
</asp:ListBox> 
</td> 
<td width="50" align="center"> 
<input id="Button1" type="button" value=">>" runat="server" />
</td> 
<td rowspan="2"> 
<asp:ListBox ID="ListBox2" runat="server" Width="100px" SelectionMode="Multiple"></asp:ListBox> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input id="Button2" type="button" value="<<" runat="server" />
</td> 
</tr> 
</table>


if (!this.IsPostBack) 
{ 
Button1.Attributes.Add("onClick","MoveOption('" + this.ListBox1.ClientID + "','" + this.ListBox2.ClientID + "')");
Button2.Attributes.Add("onClick","MoveOption('" + this.ListBox2.ClientID + "','" + this.ListBox1.ClientID + "')");
}