Select2 v4.0 - 選擇多個值

我想在Select2的實例中以編程方式選擇多個值。Select2 v4.0 - 選擇多個值

我的問題是，它只接受給定數組的第一個值，就好像它不是多重選擇一樣。

請參見下面的代碼片段：

$(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它應該將要走的路。任何想法？

來源

2017-01-06 pistou

正如你可以在文檔中看到programatic access，對已設定值進行初始化select2，你可以簡單地使用：

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

您可能忽略的變化觸發。它的重要性在於插件在這個事件上綁定了它的方法。

但是，如果您想在設置select2之前最初設置值，則可以先設置該值，然後在該元素上調用select2。例如

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

看看這個jsbin的演示。

來源

2017-01-06 10:54:06 guleria

謝謝你，這就是訣竅。我的代碼可以在select2 v3.5中工作，但是他們在v4.0中改變了它。 – pistou

這應該做的工作：

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

來源

2017-01-06 11:01:29

Select2 v4.0 - 選擇多個值

回答

相關問題