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"
    });

You are using select2.js. see the documentation to do the required changeshttps://select2.github.io/examples.html#programmatic-control — Manjoor, Mar 13 '16 at 08:55
Can any body help me with select2 please .jQuery can not clear because of select2 — Syed Mhamudul Hasan, Mar 13 '16 at 09:00

score 1 · Answer 1 · answered Mar 13 '16 at 08:31

1

You can try something like this to get it reset:

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

answered Mar 13 '16 at 08:31

Luke P. Issac

1,471
15
32

Can you just inspect the element and give the actual markup rendered on screen. – Luke P. Issac Mar 13 '16 at 08:37
`' – Syed Mhamudul Hasan Mar 13 '16 at 08:39
Just check the execution order of the script as well. – Luke P. Issac Mar 13 '16 at 09:11
**$('#lbComplaints').select2('data', null);** works with me. As i am using plugin select2 does not let me clear the List box So i tried above and it works – Syed Mhamudul Hasan Mar 13 '16 at 09:13

Manjoor · Answer 2 · 2016-03-13T09:02:35.000

1

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

edited Mar 13 '16 at 09:02

answered Mar 13 '16 at 08:35

Manjoor

4,091
10
43
67

Empties all the option which can not be seen after second button click – Syed Mhamudul Hasan Mar 13 '16 at 08:36
Now it works.But a similar answer was found in http://stackoverflow.com/questions/13240047/clear-dropdown-using-jquery-select2/28086410 by the way thanks @Manjoor Correct answer may be **$('#lbComplaints').select2('data', null);** – Syed Mhamudul Hasan Mar 13 '16 at 09:06
Glad to know you sorted it out. – Manjoor Mar 13 '16 at 09:09

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

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

edited May 23 '17 at 12:13

Community

1
1

answered Mar 13 '16 at 09:17

Syed Mhamudul Hasan

1,341
2
17
45

ListBox items remains after replace by empty array in jQuery

3 Answers3

Linked