JQuery reset select2 in modal

Question

I have tried the way like this to reset select2 in my modal, but It does not work.

$(".payment-method").select2('data', null);

<div class="modal-body"> 
                  <form class="form-horizontal" id="category-form" enctype="multipart/form-data">
                  {{ csrf_field() }}
                        <div class="col-xs-12 col-sm-6 col-md-6">
                          <label>Payment Methods (Untuk kebutuhan tertentu)</label>
                          <div class="dropdown">
                            <select class="form-control payment-method" name="paymentType" multiple="multiple" data-placeholder="Select the payment method">
                              <option value="1">cash</option>
                              <option value="2">credit</option>
                              <option value="3">debit</option>
                            </select>
                          </div>
                        </div>
                      </div>

                </form>
                </div>

What do you mean by reset? Do you want to clear the filter, or reinitialize the entire ` — Terry, Sep 25 '17 at 07:41
Reset as in clear the selection? Also what version of select2 are you using? — apokryfos, Sep 25 '17 at 07:43
@Terry I choose data in my modal using select2, when I close and re-open my modal again, my select2 select the data before, so I want to clear all the data when I re-open my modal — Jems, Sep 25 '17 at 07:55
@apokryfos how to check the version? I am new in programming world — Jems, Sep 25 '17 at 07:55
It should be written in the JS source of what you're including. If you're using a CDN (linking the source directly) it might be part of the URL, if it's not then it's probably version 4 something — apokryfos, Sep 25 '17 at 07:56
Sorry I didn't see wel your question & didn't see the "Reset" part, however can we have the code of your modal ?! — Mehdi Bouzidi, Sep 25 '17 at 07:56
@MehdiBouzidi sure.. I have editted my question.. You can see my modal now — Jems, Sep 25 '17 at 08:01
@Terry I can't use destroy. If I use destroy, When I re-open my modal.. My select2 will be destroyed — Jems, Sep 25 '17 at 08:04
Did you read the other half of my original comment... *[...] before calling `.select2()` again*? Reinitialize your select2 when you open the modal. — Terry, Sep 25 '17 at 08:05
select2 version 4+ will listen on events on the underlying select so if you do something like `$(".payment-method").val([]).trigger("change")` that should be reflected in the select2 select as well — apokryfos, Sep 25 '17 at 08:08
@Terry I destroy it then call select2() again, but still same — Jems, Sep 25 '17 at 08:09

score 3 · Accepted Answer · answered Oct 02 '17 at 07:29

3

$(".payment-method").val([]).trigger("change"); //Answered by apokryfos

answered Oct 02 '17 at 07:29

Jems

1,666
4
20
50

score 0 · Answer 2 · answered Sep 25 '17 at 08:33

0

If you using Select2 4.x just trigger change.select2

$('.payment-method').val(1).trigger('change.select2');

answered Sep 25 '17 at 08:33

Hasan Shahriar

468
3
11

JQuery reset select2 in modal

2 Answers2