ListBox items remains after replace by empty array in jQuery

Question

I have a list box which I want to clear by jQuery without page refresh.

<asp:ListBox ID="lbComplaints" runat="server" 
ClientIDMode="Static" SelectionMode="Multiple" 
placeholder="Select Complaints" Style="width: 280px;" AppendDataBoundItems="True">

in a button click

$('input[type="submit"]').click(function (e) {
        e.preventDefault(); 
    $("#lbComplaints").val([]);    
)};

It does not show any error but the items remain in previous selection.

I tried

 $("#lbComplaints").empty();

but all the data of the Listbox is removed but I do not want to remove options but unselection of previous option in Listbox value so that user can select again. How can I do that?

By the way i used

$('#lbComplaints').select2({
        placeholder: 'select a state',
        //tags: "true",
        //allowClear: true,
        theme: "classic"
    });

Answer 1

您可以尝试执行以下操作将其重置：

 $("#lbComplaints option:selected").removeAttr("selected");

Answer 2

Unselect

$("#lbComplaints").find("option").attr("selected", false);

You are using select2.js. Modify your javascript as below

var $listX = $('#lbComplaints').select2({
        placeholder: 'select a state',
        //tags: "true",
        //allowClear: true,
        theme: "classic"
    });

    $('input[type="submit"]').click(function (e) {
            e.preventDefault(); 
           $listX.val(null);
    )};

see the documentation here https://select2.github.io/examples.html#programmatic-control

Answer 3

But a similar answer was found in

link

As i am using select2 jQuery cannot clear selected items so using select2 $('#lbComplaints').select2('data', null); this works perfectly