3

I want to select programmatically multiple values in an instance of Select2.

My issue is that it only takes the first value of the given array as if it was not a multiple select.

See the following snippet:

$(document).ready(function() {
  $('select.select2').each(function() {
    $(this).select2();
  });
  
  var selectedCodeWBs = ['ARG', 'CAN', 'USA'];
  $('#countryCodeWB').select2('val', selectedCodeWBs);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />

<select id="countryCodeWB" class="form-control select2" name="CountryZone__CountryCodeWBs" multiple="multiple">
    <option value="AGO" data-code="AO">ANGOLA</option>
    <option value="ARG" data-code="AR">ARGENTINE</option>
    <option value="AUS" data-code="AU">AUSTRALIE</option>
    <option value="BDI" data-code="BI">BURUNDI</option>
    <option value="BEN" data-code="BJ">BÉNIN</option>
    <option value="BFA" data-code="BF">BURKINA FASO</option>
    <option value="BGD" data-code="BD">BANGLADESH</option>
    <option value="BRA" data-code="BR">BRÉSIL</option>
    <option value="CAN" data-code="CA">CANADA</option>
    <option value="CHE" data-code="CH">SUISSE</option>
    <option value="CHL" data-code="CL">CHILI</option>
    <option value="CHN" data-code="CN">CHINE</option>
    <option value="CIV" data-code="CI">CÔTE D'IVOIRE</option>
    <option value="CMR" data-code="CM">CAMEROUN</option>
    <option value="COL" data-code="CO">COLOMBIE</option>
    <option value="DEU" data-code="DE">ALLEMAGNE</option>
    <option value="DNK" data-code="DK">DANEMARK</option>
    <option value="DZA" data-code="DZ">ALGÉRIE</option>
    <option value="EGY" data-code="EG">ÉGYPTE</option>
    <option value="ESP" data-code="ES">ESPAGNE</option>
    <option value="ETH" data-code="ET">ÉTHIOPIE</option>
    <option value="FRA" data-code="FR">FRANCE</option>
    <option value="GBR" data-code="GB">ROYAUME-UNI</option>
    <option value="GHA" data-code="GH">GHANA</option>
    <option value="GIN" data-code="GN">GUINÉE</option>
    <option value="IDN" data-code="ID">INDONÉSIE</option>
    <option value="IND" data-code="IN">INDE</option>
    <option value="IRN" data-code="IR">IRAN</option>
    <option value="ITA" data-code="IT">ITALIE</option>
    <option value="JPN" data-code="JP">JAPON</option>
    <option value="KEN" data-code="KE">KENYA</option>
    <option value="KOR" data-code="KR">CORÉE, RÉPUBLIQUE DE</option>
    <option value="MDG" data-code="MG">MADAGASCAR</option>
    <option value="MEX" data-code="MX">MEXIQUE</option>
    <option value="MLI" data-code="ML">MALI</option>
    <option value="MOR" data-code="MA">MAROC</option>
    <option value="MOZ" data-code="MO">MACAO</option>
    <option value="MUS" data-code="MU">MAURICE</option>
    <option value="MWI" data-code="MW">MALAWI</option>
    <option value="MYS" data-code="MY">MALAISIE</option>
    <option value="NER" data-code="NE">NIGER</option>
    <option value="NGA" data-code="NG">NIGÉRIA</option>
    <option value="NLD" data-code="NL">PAYS-BAS</option>
    <option value="NPL" data-code="NP">NÉPAL</option>
    <option value="PAK" data-code="PK">PAKISTAN</option>
    <option value="PER" data-code="PE">PÉROU</option>
    <option value="PHL" data-code="PH">PHILIPPINES</option>
    <option value="POL" data-code="PL">POLOGNE</option>
    <option value="ROM" data-code="RO">ROUMANIE</option>
    <option value="RUS" data-code="RU">RUSSIE, FÉDÉRATION DE</option>
    <option value="RWA" data-code="RW">RWANDA</option>
    <option value="SAU" data-code="SA">ARABIE SAOUDITE</option>
    <option value="SDN" data-code="SD">SOUDAN</option>
    <option value="SEN" data-code="SN">SÉNÉGAL</option>
    <option value="SGP" data-code="SG">SINGAPOUR</option>
    <option value="TCD" data-code="TD">TCHAD</option>
    <option value="TGO" data-code="TG">TOGO</option>
    <option value="THA" data-code="TH">THAÏLANDE</option>
    <option value="TUR" data-code="TR">TURQUIE</option>
    <option value="TZA" data-code="TZ">TANZANIE, RÉPUBLIQUE-UNIE DE</option>
    <option value="UGA" data-code="UG">OUGANDA</option>
    <option value="UKR" data-code="UA">UKRAINE</option>
    <option value="USA" data-code="US">ÉTATS-UNIS</option>
    <option value="VNM" data-code="VN">VIET NAM</option>
    <option value="YEM" data-code="YE">YÉMEN</option>
    <option value="ZAF" data-code="ZA">AFRIQUE DU SUD</option>
</select>

According to this post it should be the way to go. Any idea?

Improve this question

2 Answers 2

Reset to default
8

As you can see in documentation for programatic access, for setting values on already initialized select2 you can simply use:

$element.val(selectedCodeWBs).trigger('change');

You might be missing the change trigger. Its important because the plugin binds its methods on this event.

But if you want to set the values initially before setting up select2 you can set the value first and then call select2 on the element. e.g.

$element.val(selectedCodeWBs).select2();

Have a look at this jsbin for demo.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, that's the trick. My code would work in select2 v3.5 but they changed it in v4.0..
6

This should do the work:

$(document).ready(function() {
  $('select.select2').each(function() {
    $(this).select2();
  });
  
  var selectedCodeWBs = ['ARG', 'CAN', 'USA'];

  
  $('#countryCodeWB').select2().val(selectedCodeWBs).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />

<select id="countryCodeWB" class="form-control select2" name="CountryZone__CountryCodeWBs" multiple="multiple">
    <option value="AGO" data-code="AO">ANGOLA</option>
    <option value="ARG" data-code="AR">ARGENTINE</option>
    <option value="AUS" data-code="AU">AUSTRALIE</option>
    <option value="BDI" data-code="BI">BURUNDI</option>
    <option value="BEN" data-code="BJ">BÉNIN</option>
    <option value="BFA" data-code="BF">BURKINA FASO</option>
    <option value="BGD" data-code="BD">BANGLADESH</option>
    <option value="BRA" data-code="BR">BRÉSIL</option>
    <option value="CAN" data-code="CA">CANADA</option>
    <option value="CHE" data-code="CH">SUISSE</option>
    <option value="CHL" data-code="CL">CHILI</option>
    <option value="CHN" data-code="CN">CHINE</option>
    <option value="CIV" data-code="CI">CÔTE D'IVOIRE</option>
    <option value="CMR" data-code="CM">CAMEROUN</option>
    <option value="COL" data-code="CO">COLOMBIE</option>
    <option value="DEU" data-code="DE">ALLEMAGNE</option>
    <option value="DNK" data-code="DK">DANEMARK</option>
    <option value="DZA" data-code="DZ">ALGÉRIE</option>
    <option value="EGY" data-code="EG">ÉGYPTE</option>
    <option value="ESP" data-code="ES">ESPAGNE</option>
    <option value="ETH" data-code="ET">ÉTHIOPIE</option>
    <option value="FRA" data-code="FR">FRANCE</option>
    <option value="GBR" data-code="GB">ROYAUME-UNI</option>
    <option value="GHA" data-code="GH">GHANA</option>
    <option value="GIN" data-code="GN">GUINÉE</option>
    <option value="IDN" data-code="ID">INDONÉSIE</option>
    <option value="IND" data-code="IN">INDE</option>
    <option value="IRN" data-code="IR">IRAN</option>
    <option value="ITA" data-code="IT">ITALIE</option>
    <option value="JPN" data-code="JP">JAPON</option>
    <option value="KEN" data-code="KE">KENYA</option>
    <option value="KOR" data-code="KR">CORÉE, RÉPUBLIQUE DE</option>
    <option value="MDG" data-code="MG">MADAGASCAR</option>
    <option value="MEX" data-code="MX">MEXIQUE</option>
    <option value="MLI" data-code="ML">MALI</option>
    <option value="MOR" data-code="MA">MAROC</option>
    <option value="MOZ" data-code="MO">MACAO</option>
    <option value="MUS" data-code="MU">MAURICE</option>
    <option value="MWI" data-code="MW">MALAWI</option>
    <option value="MYS" data-code="MY">MALAISIE</option>
    <option value="NER" data-code="NE">NIGER</option>
    <option value="NGA" data-code="NG">NIGÉRIA</option>
    <option value="NLD" data-code="NL">PAYS-BAS</option>
    <option value="NPL" data-code="NP">NÉPAL</option>
    <option value="PAK" data-code="PK">PAKISTAN</option>
    <option value="PER" data-code="PE">PÉROU</option>
    <option value="PHL" data-code="PH">PHILIPPINES</option>
    <option value="POL" data-code="PL">POLOGNE</option>
    <option value="ROM" data-code="RO">ROUMANIE</option>
    <option value="RUS" data-code="RU">RUSSIE, FÉDÉRATION DE</option>
    <option value="RWA" data-code="RW">RWANDA</option>
    <option value="SAU" data-code="SA">ARABIE SAOUDITE</option>
    <option value="SDN" data-code="SD">SOUDAN</option>
    <option value="SEN" data-code="SN">SÉNÉGAL</option>
    <option value="SGP" data-code="SG">SINGAPOUR</option>
    <option value="TCD" data-code="TD">TCHAD</option>
    <option value="TGO" data-code="TG">TOGO</option>
    <option value="THA" data-code="TH">THAÏLANDE</option>
    <option value="TUR" data-code="TR">TURQUIE</option>
    <option value="TZA" data-code="TZ">TANZANIE, RÉPUBLIQUE-UNIE DE</option>
    <option value="UGA" data-code="UG">OUGANDA</option>
    <option value="UKR" data-code="UA">UKRAINE</option>
    <option value="USA" data-code="US">ÉTATS-UNIS</option>
    <option value="VNM" data-code="VN">VIET NAM</option>
    <option value="YEM" data-code="YE">YÉMEN</option>
    <option value="ZAF" data-code="ZA">AFRIQUE DU SUD</option>
</select>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.