## **ASP.NET ListBox 控件实现item的移除、清空、上移、下移动**

ASP.NET webForm ListBox 控件实现item的加入、移除、清空、上移、下移动

一、前台代码

    <div id="main">
        <h1>添加自选股票</h1>
        <div>
            <div id="option">
                <h2>目标股</h2>
                <asp:ListBox ID="listOption" runat="server" SelectionMode="Single" Width="200px" Height="300px" OnSelectedIndexChanged="listOption_SelectedIndexChanged">
                    <asp:ListItem Value="0" Enabled="true">浦发银行</asp:ListItem>
                    <asp:ListItem Value="1" Enabled="true">白云机场</asp:ListItem>
                    <asp:ListItem Value="2" Enabled="true">武钢股份</asp:ListItem>
                    <asp:ListItem Value="3" Enabled="true">莫高股份</asp:ListItem>
                    <asp:ListItem Value="4" Enabled="true">深圳成指</asp:ListItem>
                    <asp:ListItem Value="5" Enabled="true">上证指数</asp:ListItem>
                    <asp:ListItem Value="6" Enabled="true">东方明珠</asp:ListItem>
                    <asp:ListItem Value="7" Enabled="true">东方卫视</asp:ListItem>
                </asp:ListBox>
            </div>
            <div id="btns">
                <asp:Button ID="btnAdd" runat="server" Text="加入" Width="88px" Height="30px" OnClick="Add" />
                <asp:Button ID="btnMoveOut" runat="server" Text="取消" Width="88px" Height="30px" OnClick="MoveOut" />
                <asp:Button ID="btnMoveTop" runat="server" Text="上移" Width="88px" Height="30px" OnClick="MoveTop" />
                <asp:Button ID="btnMoveB0ttom" runat="server" Text="下移" Width="88px" Height="30px" OnClick="MoveBottom" />
                <asp:Button ID="btnClear" runat="server" Text="清空" Width="88px" Height="30px" OnClick="Clear" />
            </div>
            <div id="selected">
                <h2>自选股</h2>
                <asp:ListBox ID="listSelected" runat="server" SelectionMode="Single" Width="200px" Height="300px" OnSelectedIndexChanged="listSelected_SelectedIndexChanged">
                </asp:ListBox>
            </div>
        </div>
    </div>

二、添加一些样式

#main {
            width:520px;
            margin:0 auto;
        }
        h2{
            color:#353535;
        }
        #option{
            width:202px;
            float:left;
        }
        select option{
            font-size:20px;
            color:#353535;
        }
        #btns{
            
            float:left;
            width:100px;
            padding-top:70px;
            padding-left:8px;
        }
        #btns input{
            margin-top:16px;
        }
        #selected{
            width:202px;
            float:right;
        }

三、每个按钮的后台代码

        //加入
        protected void Add(object sender, EventArgs e)
        {
            if (listOption.SelectedIndex > 0)
            {
                //判断重复
                foreach (ListItem item in listSelected.Items)
                {
                    if (listOption.SelectedItem.Value==item.Value)
                    {
                        return;
                    }
                }
                listSelected.SelectedIndex = -1;
                listSelected.Items.Add(listOption.SelectedItem);
            }
            
        }
       
        /// 移除
        protected void MoveOut(object sender, EventArgs e)
        {
            if (listSelected.SelectedIndex >= 0)
            {
                listSelected.Items.Remove(listSelected.SelectedItem);
            }
        }
        
        /// 上移
        protected void MoveTop(object sender, EventArgs e)
        {
            if (listSelected.SelectedIndex >0)
            {
                int idx = listSelected.SelectedIndex;
                listSelected.Items.Insert(listSelected.SelectedIndex - 1, listSelected.SelectedItem.ToString());
                listSelected.Items.RemoveAt(listSelected.SelectedIndex);
                listSelected.SelectedIndex = idx - 1;
            }
        }
        
        /// 下移
        protected void MoveBottom(object sender, EventArgs e)
        {
            if (listSelected.SelectedIndex <listSelected.Items.Count-1)
            {
                listSelected.Items.Insert(listSelected.SelectedIndex, listSelected.Items[listSelected.SelectedIndex+1].ToString());
                listSelected.Items.RemoveAt(listSelected.SelectedIndex+1);
            }
        }
        
        /// 清空
        protected void Clear(object sender, EventArgs e)
        {
            if (listSelected.SelectedIndex>=0)
            {
                listSelected.Items.Clear();
            }
        }

四、效果图

可以从左侧的listbox中选择item添加到右侧的listbox中