Select2 v4.0 - 选择多个值

Question

我想在Select2的实例中以编程方式选择多个值。

我的问题是它只接受给定数组的第一个值，就好像它不是多重选择一样。

请参阅以下代码段：

$(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>

根据this post，应成为可行的方式。有什么想法吗？

Answer 1

正如您在programatic access的文档中所看到的，要设置已初始化select2的值，您只需使用：

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

您可能错过了更改触发器。它很重要，因为插件会在此事件中绑定其方法。

但是如果您想在设置select2之前设置值，您可以先设置值，然后在元素上调用select2。 e.g。

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

请查看此jsbin进行演示。

Answer 2

这应该做的工作：

＆＃13;

＆＃13;

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

  
  $('#countryCodeWB').select2().val(selectedCodeWBs).trigger("change");
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;