در این مقاله میخواهیم چند آیتم را در یک لیست باکس انتخاب کرده سپس تمامی رکورد های انتخاب شده را توسط jquery حذف کنیم

حذف چند آیتم از ListBox در Asp.Net توسط Jquery

JavaScript:

به صفحه html خود از جعبه ابزار یک کنترل ListBox و یک دکمه اضافه کنید  زمانی که روی دکمه کلیک شود تابع DeleteValues اجرا می شود در این تابع یک حلقه به صورت معکوس روی آیتم های listbox اجرا میشود و ایتم های انتخاب شده را حذف می کند پس برای دیدن خروجی به listbox  چند ایتم اضافه میکنیم:

<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1"></asp:ListItem>
    <asp:ListItem Text="Apple" Value="2"></asp:ListItem>
    <asp:ListItem Text="Banana" Value="3"></asp:ListItem>
    <asp:ListItem Text="Guava" Value="4"></asp:ListItem>
    <asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
    <asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
    <asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<br />
<hr />
<asp:Button ID="btnDelete" Text="Delete" runat="server" OnClientClick="return DeleteValues()" />
<script type="text/javascript">
    function DeleteValues() {
        var listBox = document.getElementById("<%= ListBox1.ClientID%>");
        for (var i = listBox.options.length - 1; i >= 0; i--) {
            if (listBox.options[i].selected) {
                listBox.removeChild(listBox.options[i]);
            }
        }
        return false;
    }
</script>

jQuery:

در هنگام استفاده از jquery در کنترل رویداد کلیک دکمه ایتم های انتخاب شده حذف میشوند:

<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1"></asp:ListItem>
    <asp:ListItem Text="Apple" Value="2"></asp:ListItem>
    <asp:ListItem Text="Banana" Value="3"></asp:ListItem>
    <asp:ListItem Text="Guava" Value="4"></asp:ListItem>
    <asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
    <asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
    <asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<br />
<hr />
<asp:Button ID="btnDelete" Text="Delete" runat="server"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnDelete]").bind("click", function () {
            $("[id*=ListBox1] option:selected").remove();
            return false;
        });
    });
</script>