如何设置 jQuerySelect2的选定值？

这属于 Select2版本4之前的代码

我有一个从 AJAX 获取数据的简单的 select2代码。

$("#programid").select2({
placeholder: "Select a Program",
allowClear: true,
minimumInputLength: 3,
ajax: {
url: "ajax.php",
dataType: 'json',
quietMillis: 200,
data: function (term, page) {
return {
term: term, //search term
flag: 'selectprogram',
page: page // page number
};
},
results: function (data) {
return {results: data};
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});

这段代码正在工作，但是，我需要在它上面设置一个值，就像在编辑模式中一样。当用户第一次选择一个值时，它将被保存，当他需要编辑该值时，它必须出现在同一个选择菜单(select2)中，以选择先前选择的值，但我找不到一种方法。

更新:

HTML 代码:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

Select2程序访问 不适用于此。

599938 次浏览
小开
最佳答案

动态设置 Select2组件的“选定”值:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

其中第二个参数是具有期望值的对象。

更新:

这确实有效，只是想指出，在新的 select2中，“一把钥匙”是标准 select2对象中的 “短信”。所以: {id: 100, text: 'Lorem Ipsum'}

示例: 

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

感谢@NoobishPro

小开

网址:

<select id="lang" >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>

JavaScript:

$("#lang").select2().select2('val','asp');

Jsfiddle

小开

SELECT2 < V4

第一步: 超文本标示语言

<input name="mySelect2" type="hidden" id="mySelect2">

第二步: 创建 Select2的实例

$("#mySelect2").select2({
placeholder: "My Select 2",
multiple: false,
minimumInputLength: 1,
ajax: {
url: "/elements/all",
dataType: 'json',
quietMillis: 250,
data: function(term, page) {
return {
q: term,
};
},
results: function(data, page) {
return {results: data};
},
cache: true
},
formatResult: function(element){
return element.text + ' (' + element.id + ')';
},
formatSelection: function(element){
return element.text + ' (' + element.id + ')';
},
escapeMarkup: function(m) {
return m;
}
});

第三步: 设置你想要的价值

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

如果你使用 没有 AJAX 的 select2，你可以这样做:

<select name="mySelect2" id="mySelect2">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>

/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

你也可以这样做:

$("#mySelect2").select2("val", "0");

选择2 V4

对于 Select2 v4，您可以直接附加一个选项/s，如下所示:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
<option value="TheID" selected="selected">The text</option>
</select>

或者使用 JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
 

$("#myMultipleSelect2").append($newOption).trigger('change');

另一个例子

$("#myMultipleSelect2").val(5).trigger('change');
小开

我认为你需要 initSelection功能

$("#programid").select2({
placeholder: "Select a Program",
allowClear: true,
minimumInputLength: 3,
ajax: {
url: "ajax.php",
dataType: 'json',
quietMillis: 200,
data: function (term, page) {
return {
term: term, //search term
flag: 'selectprogram',
page: page // page number
};
},
results: function (data) {
return {results: data};
}
},
initSelection: function (element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax("ajax.php/get_where", {
data: {programid: id},
dataType: "json"
}).done(function (data) {
$.each(data, function (i, value) {
callback({"text": value.text, "id": value.id});
});
;
});
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
小开

我做了类似的事情来预设 select2 ajax 下拉列表中的元素

      //preset element values
$(id).val(topics);
//topics is an array of format [{"id":"","text":""}, .....]
setTimeout(function(){
ajaxTopicDropdown(id,
2,location.origin+"/api for gettings topics/",
"Pick a topic", true, 5);
},1);
// ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url
小开

在 ABC0-v4.0.1的当前版本中，您可以这样设置值:

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });


// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
<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.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />


using "trigger(change)"
<select class="js-example-programmatic">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>


using destroy:
<select class="js-example-programmatic">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>


<button class="js-programmatic-set-val">set value</button>

小开

同样，当我尝试在 select2中使用 ajax 时，用于在 select2中设置新值的 程序控制方法对我不起作用！ 现在我编写这些代码来解决这个问题:

$('#sel')
.empty() //empty select
.append($("<option/>") //add option tag in select
.val("20") //set value for option to post it
.text("nabi")) //set a text for show in select
.val("20") //select option of select2
.trigger("change"); //apply to select2

您可以在这里测试完整的示例代码链接: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
在这个示例代码中有一个 ajax select2，您可以用一个按钮设置新值。

$("#btn").click(function() {
$('#sel')
.empty() //empty select
.append($("<option/>") //add option tag in select
.val("20") //set value for option to post it
.text("nabi")) //set a text for show in select
.val("20") //select option of select2
.trigger("change"); //apply to select2
});


$("#sel").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;


return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});


function formatRepo(repo) {
if (repo.loading) return repo.text;


var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";


if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}


markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";


return markup;
}


function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">


<select id="sel" multiple="multiple" class="col-xs-5">
</select>


<button id="btn">Set Default</button>

小开

对于 Ajax，使用 $(".select2").val("").trigger("change")。这应该可以解决问题。

小开

你应使用:

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');


// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');


// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
// append the new option
$("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');


// get a list of selected values if any - or create an empty array
var selectedValues = $("#EventId").val();
if (selectedValues == null) {
selectedValues = new Array();
}
selectedValues.push(response.id);   // add the newly created option to the list of selected items
$("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});
小开

安攀的回答对我很有效:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

但是添加更改会触发事件

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
小开 
var $option = $("<option selected></option>").val('1').text("Pick me");


$('#select_id').append($option).trigger('change');

尝试这个附加然后选择。不重复的选项在 AJAX 调用。

小开

超文本标示语言

<select id="lang" >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>

JS

 $("#lang").select2().val('php').trigger('change.select2');

来源: https://select2.github.io/options.html

小开

如果使用输入框，则必须将“ multi”属性的值设置为“ true”,

<script>
$(document).ready(function () {


var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
{ id: 200, text: 'Lorem Ipsum 2'}];


$('#inputID').select2({
data: arr,
width: 200,
multiple: true
});
});
</script>
小开

在 select2 < version4中有一个用于远程数据加载的选项 initSelection()，通过它可以像在编辑模式中那样为输入设置初始值。

$("#e6").select2({
placeholder: "Search for a repository",
minimumInputLength: 1,
ajax: {
// instead of writing the function to execute the request we use Select2's convenient helper
url: "https://api.github.com/search/repositories",
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter the remote JSON data
return { results: data.items };
},
cache: true
},
initSelection: function(element, callback) {
// the input tag has a value attribute preloaded that points to a preselected repository's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the repository name is shown preselected
var id = $(element).val();
if (id !== "") {
$.ajax("https://api.github.com/repositories/" + id, {
dataType: "json"
}).done(function(data) { callback(data); });
}
},
formatResult: repoFormatResult, // omitted for brevity, see the source of this page
formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

资料来源: 选择2-3.5

小开

在 选择2 V 4

使用 $('selector').select2().val(value_to_select).trigger('change');

我觉得应该能行

小开

有时，select2()将首先加载，这使得控件不能正确显示先前选择的值。延迟几秒钟就可以解决这个问题。

setTimeout(function(){
$('#costcentreid').select2();
},3000);
小开

您可以使用以下代码:

    $('#country').select2("val", "Your_value").trigger('change');

把你想要的值代替 Your _ value

希望它能起作用:)

小开

再加上其他可能和我有同样问题的人。

我试图设置我的动态加载选项(来自 AJAX)的选择选项，并试图根据一些逻辑设置选择的选项之一。

我的问题来了，因为我没有试图设置选择的选项基于 ID 需要匹配的值，而不是值匹配的名称！

小开

慢慢来:

document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";

然后将 id_city更改为选择的 id。

编辑: 在格伦的评论之后，我意识到我应该解释一下为什么它对我起作用，以及它是如何起作用的:

我已经使 select2工作得非常好，为我的形式。我唯一做不到的是在编辑时显示当前选定的值。它正在搜索第三方 API，保存新的和编辑旧的记录。过了一会儿，我意识到我不需要正确设置值，只需要字段内的标签，因为如果用户不更改字段，什么也不会发生。在搜索并寻找了许多人对它有困难之后，我决定使用纯 Javascript 来实现它。它起作用了，我发帖子也许是为了帮助别人。我还建议设置一个计时器。

小开

我喜欢这样

$("#drpServices").select2().val("0").trigger("change");
小开

你可以使用以下代码:

$("#programid").val(["number:2", "number:3"]).trigger("change");

“ number: 2”中的2和“ number: 3”中的3是对象数组中的 id 字段吗

小开

对于多个值，如下所示:

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

也就是说

$("#HouseIds").select2("val", [35293,49525]);
小开

设置值并立即触发更改事件。

$('#selectteam').val([183,182]).trigger('change');
小开

这可以帮助某人从 AJAX 加载 select2数据，同时加载用于编辑的数据(适用于单个或多个选择) :

在加载表单/模型期间:

  $.ajax({
type: "POST",
...
success: function (data) {
selectCountries(fixedEncodeURI(data.countries));
}

为 Select2调用选择数据:

var countrySelect = $('.select_country');
function selectCountries(countries)
{
if (countries) {
$.ajax({
type: 'GET',
url: "/regions/getCountries/",
data: $.param({ 'idsSelected': countries }, true),


}).then(function (data) {
// create the option and append to Select2
$.each(data, function (index, value) {
var option = new Option(value.text, value.id, true, true);
countrySelect.append(option).trigger('change');
console.log(option);
});
// manually trigger the `select2:select` event
countrySelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
}
}

如果你可能在编码方面有问题，你可能会根据自己的需要做出改变:

function fixedEncodeURI(str) {
return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");


}
小开 
    $("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');

我用这个简单的代码解决了我的问题。其中 # select _ location _ ID 是选择框的 ID，value 是 select2框中列出的选项的值。

小开

如果您正在从 Ajax 获取您的值，请在调用

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');

确认 ajax 调用已经完成，在以下情况下使用 jquery 函数

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
// the code here will be executed when all four ajax requests resolve.
// a1, a2, a3 and a4 are lists of length 3 containing the response text,
// status, and jqXHR object for each of the four ajax calls respectively.
});
正如这里所描述的 [Wait until all jQuery Ajax requests are done?

小开

建立在@tomloprod 的回答之上。如果您正在使用 可编辑的，并且有一个 select2(v4)字段，并且有多个项目需要预先选择，那么这种可能性很小。您可以使用以下代码:

$("#select2field").on("shown", function(e, editable){
$(["test1", "test2", "test3", "test4"]).each(function(k, v){
// Create a DOM Option and pre-select by default~
var newOption = new Option(v.text, v.id, true, true);
// Append it to the select
$(editable.input.$input).append(newOption).trigger('change');
});
});

这就是它的作用:

var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];


$("#select2field").editable({
type: "select2",
url: './',
name: 'select2field',
savenochange: true,
send: 'always',
mode: 'inline',
source: data,
value: "bug, wontfix",
tpl: '<select style="width: 201px;">',
select2: {
width: '201px',
tags: true,
tokenSeparators: [',', ' '],
multiple: true,
data:data
},
success: function(response, newValue) {
console.log("success")
},
error: function(response, newValue) {
if (response.status === 500) {
return 'Service unavailable. Please try later.';
} else {
return response.responseJSON;
}
}
});


var preselect= [
{
id: 1,
text: 'bug'
},
{
id: 4,
text: 'wontfix'
}
];


$("#select2field").on("shown", function(e, editable){
$(preselect).each(function(k, v){
// Create a DOM Option and pre-select by default~
var newOption = new Option(v.text, v.id, true, true);
// Append it to the select
$(editable.input.$input).append(newOption).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.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />


<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>


<a id="select2field">bug, wontfix</a>

我想即使你不使用 x 可编辑，这也会起作用。我希望 htis 可以帮助别人。

小开 
$('#inputID').val("100").select2();

在选择当前选择之一之后应用 select2会更合适。

小开

我在 Laravel 中使用 select2和 ajax source。在我的情况下，它简单的工作循环选项，我从页面接收并添加选项到 select2。.

$filter i-> stato = [1,2，... ] ;

$(’# stato’)是我的 select2，服务器端负载

<script>
@foreach ($filtri->stato as $item)
$('#stato').append(new Option("\{\{\App\Models\stato::find($item)->nome}}",\{\{$item}}, false, true));
@endforeach
</script>

在我的例子中，我可以使用 find方法调用 text of option，但是也可以使用 ajax 调用

小开

这对我很有用:

        initSelection: function (element, callback) {
var id = $(element).val();
$.ajax("url/" + id, {
dataType: "json"
}).done(function (data) {
var newOption = new Option(data.title, data.id, true, true);
$('#select2_id').append(newOption).trigger('change');
callback({"text": data.title, "id": data.id});
});
},
小开

Select2文档官员表示:

对于从 一个 AJAX 源代码接收数据的 Select2控件，使用。Val () 没用的.这些选项还不存在，因为直到打开控件和/或用户开始搜索时才会触发 AJAX 请求。

要设置 select2字段中的值，请在页面渲染过程中将 <option>标记放在 <select>标记中:

<select id="input-degree">
<option value="1">Art</option>
</select>

当页面加载时，您将在 select2字段中看到 Art。如果我们点击这个字段数据将通过 Ajax 从服务器获取，并显示其他选项。

小开

在远程来源(AJAX) Select2中预选择选项 对于从 AJAX 源接收数据的 Select2控件，使用。Val ()将不起作用。这些选项还不存在，因为直到打开控件和/或用户开始搜索时才会触发 AJAX 请求。由于服务器端过滤和分页，这种情况更加复杂——不能保证什么时候某个特定项会实际加载到 Select2控件中！

因此，处理这个问题的最佳方法是简单地将预选项添加为一个新选项。对于远程来源的数据，这可能涉及在服务器端应用程序中创建一个新的 API 端点，该端点可以检索单个项目:

$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');


// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
小开 
[jsfiddle_link][1] <select id="lang" multiple >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>


<!-- begin snippet: js hide: false console: true babel: false -->


<!-- language: lang-js -->


$("#lang").select2().select2('val',['asp','php']);


<!-- language: lang-html -->




[1]: https://jsfiddle.net/xrug7f6k/
小开

是否尝试将选项的“选中标志”设置为 true？


提交答案