表单加载时的 JQuery Select2 标记

Question

我正在使用 jquery 和 multi select2 标签工具编写一个 WebForm。用户从下拉列表中选择多个机构，保存，数据以单个字符串形式存储到后端 SQL 数据库，格式如下：[AGENCY1|A​​GENCY2|AGENCY3]。

<input id="ddlAgency" type="hidden" class="form-control" value="" name="select2tag"/>

当表单加载时，我可以解析标签，但是如何让它们显示为在 select2 多个表单控件中选择的（即：AGENECY1、AGENECY2、AGENECY3 显示为选定的标签，而其余的选项可以在下拉列表中选择）？

var agencySplit = row.INC_AGENCY.split("|");
for (var i = 0; i < agencySplit.length; i++) {
    $('#ddlAgency').val(agencySplit[i]);  //This Doesn't Work Like I Want It To
}

任何帮助将不胜感激。

Answer 1

您需要将拆分中的项目作为option 附加到您的select 元素中。

<select id="ddlAgency" style="width:300px" type="hidden" class="form-control" name="select2tag"/>

$('select').select2();

var agency = "AGENCY1|AGENCY2|AGENCY3";
var agencySplit = agency.split("|");
for (var i = 0; i < agencySplit.length; i++) {
    $('#ddlAgency').append("<option>" + agencySplit[i] + "</option>");  
}

http://jsfiddle.net/c1ozynyu/

如果做多选：

$('select').select2({multiple: true});

http://jsfiddle.net/c1ozynyu/1/

已更新：（基于 cmets 预先选择列表中的项目）

<select id="ddlAgency" style="width:300px" type="hidden" class="form-control" name="select2tag">
    <option val="AGENCY1">AGENCY1</option>
    <option val="AGENCY2">AGENCY2</option>
    <option val="AGENCY3">AGENCY3</option>
    <option val="AGENCY4">AGENCY4</option>
    <option val="AGENCY5">AGENCY5</option>
</select>

var array = new Array();
var agency = "AGENCY1|AGENCY2|AGENCY3";
var agencySplit = agency.split("|");
for (var i = 0; i < agencySplit.length; i++) {
    array.push(agencySplit[i]);   
}
$('select').select2({multiple: true}).select2('val', array); 

http://jsfiddle.net/c1ozynyu/2/