select2 not working on already "selected" options

Question

Am using select2 plugin for selecting multiple countries. When I populate the options for the <select>, for certain <option> I used the selected attribute to pre-select it.

Code (options were echoed using PHP in the page):

<select name="allowed_countries[]" class="form-control select2" multiple="multiple" required>
  <option value="ALL"  >All Countries</option>
  <option selected value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option selected value="DZ">Algeria</option>
  <option value="DS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option selected value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option selected value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option selected value="AU">Australia</option>
  <option value="AT">Austria</option>
  ....
</select>

At footer of the page, I am calling the function:

<script>    

    $(document).ready(function(){

        $(".select2").select2();

    });

</script>

It displays the selected items properly.

But if I try to add/delete an item, all the selected items except the first one gets removed! And you can see from the screenshot that, the selected options are not shown in grey background like the "Afghanistan" !

Any idea on what's causing the issue?

EDIT (SOLVED)

After several attempts of debugging, found that the issue was with another line on that page: $(":input").inputmask(); This selector seems to be causing the conflict. I just removed that selector with specific class name of the element which I was using the inputmask for and the select2 seems to be working fine now!

Thanks to all who tried to help me. I appreciate it.

could you inspect the html after the selected options are unselected? — Dalin Huang
Thanks guys. After several attempts of debugging, found that the issue was with another line on that page: $(":input").inputmask(); This selector seems to be causing the conflict. I just removed that selector with specific class name of the element which I was using the inputmask for and the select2 seems to be working fine now! — Vpp Man

Dalin Huang Dalin Huang · Accepted Answer · 2017-05-13T15:12:32

$(function () {
    $('.select2')
        .select2({
            width: 500
        })
        .on('change', function(){
            console.log( $(this).val() );
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<select name="allowed_countries[]" class="form-control select2" multiple="multiple" required>
  <option value="ALL"  >All Countries</option>
  <option selected value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option selected value="DZ">Algeria</option>
  <option value="DS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option selected value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option selected value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option selected value="AU">Australia</option>
</select>

select2 not working on already "selected" options

1 Answers