Select2 v4.0 - 选择多个值
Posted
技术标签:
【中文标题】Select2 v4.0 - 选择多个值【英文标题】：Select2 v4.0 - Select multiple values 【发布时间】：2017-05-21 02:34:23 【问题描述】：我想以编程方式在Select2 的实例中选择多个值。
我的问题是 它只取给定数组的第一个值，就好像它不是多选一样。
见下面的sn-p：
$(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 它应该是要走的路。有什么想法吗？
【问题讨论】：
【参考方案1】：正如您在 programatic access 的文档中看到的那样，要在已初始化的 select2 上设置值，您可以简单地使用：
$element.val(selectedCodeWBs).trigger('change');
您可能缺少更改触发器。它很重要，因为插件将它的方法绑定在这个事件上。
但是如果你想在设置select2之前先设置值，你可以先设置值，然后在元素上调用select2。例如
$element.val(selectedCodeWBs).select2();
看看这个jsbin 的演示。
【讨论】：
谢谢，这就是诀窍。我的代码可以在 select2 v3.5 中运行，但他们在 v4.0 中进行了更改..【参考方案2】：这应该可以完成工作：
$(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>【讨论】：
以上是关于Select2 v4.0 - 选择多个值的主要内容，如果未能解决你的问题，请参考以下文章