JQueryselect2从列表中的选项设置默认值？

实现这个目标的一个方法是..。

$('select').select2().select2('val', $('.select2 option:eq(1)').val());

所以基本上你首先初始化插件，然后使用‘ val’参数指定默认值。实际值取自指定的选项，在本例中为 # 1。所以从这个例子中选择的值应该是“ bar”。

<select class=".select2">
<option id="foo">Some Text</option>
<option id="bar">Other Text</option>
</select>

希望这对别人有用。

还有一种方法——只需向 select标记添加一个 selected = "selected"属性，然后对其调用 select2。它必须取你所选择的值。不需要额外的 JavaScript。像这样:

标记

<select class="select2">
<option id="foo">Some Text</option>
<option id="bar" selected="selected">Other Text</option>
</select>

JavaScript

$('select').select2(); //oh yes just this!

见小提琴: http://jsfiddle.net/6hZFU/

编辑: (谢谢 Jay Haase!)

如果这不起作用，尝试将 select2的 val属性设置为 null，以清除该值，如下所示:

$('select').select2("val", null); //a lil' bit more :)

在此之后，将 val设置为 "Whatever You Want"就很简单了。

$("#id").select2("val", null); //this will not work..you can try

你实际上应该这样做... 初始化，然后设置值. . 这也是我的工作方式。

$("#id").select2().select2("val", null);
$("#id").select2().select2("val", 'oneofthevaluehere');

对于 ajax select2多重选择下拉菜单，我是这样做的;

  //preset element values
//topics is an array of format [{"id":"","text":""}, .....]
$(id).val(topics);
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

    $('select').select2("val",null);

上面的解决方案对我来说不起作用，但是来自 Select2自己网站的代码起作用了:

$('select').val('US'); // Select the option with a value of 'US'
$('select').trigger('change'); // Notify any JS components that the value changed

在这里找到网页

希望这对像我一样挣扎的人有所帮助。

如果您使用的是数组数据源，您可以执行以下操作-

$(".select").select2({
data: data_names
});
data_names.forEach(function(name) {
if (name.selected) {
$(".select").select2('val', name.id);
}
});

这假设在数据集中，要设置为默认的一个项目有一个名为 select 的附加属性，我们使用该属性来设置值。

4. x版本

$('#select2Id').val(__INDEX__).trigger('change');

用 索引选择值

$('#select2Id').val('').trigger('change');

不选择任何内容(如果是，则显示占位符)

不知道别人的问题，只有这个代码为我工作。

$('select').val('').select2();

来自未来? 寻找 Ajax 源代码的默认值？

// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});


// Fetch the preselected item, and add to the control
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
}
});
});

举手之劳，何足挂齿。

参考文献: Https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2

步骤1: 您需要在 select 标记中追加一个空白 option，并附加一个空白值。

步骤2: 在带有占位符值的 select 标记中添加 data-placeholder属性

超文本标示语言

<select class="select2" data-placeholder='--Select--'>
<option value=''>--Select--</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
</select>

JQuery

$('.select2').select2({
placeholder: $(this).data('placeholder')
});

或者

$('.select2').select2({
placeholder: 'Custom placeholder text'
});

通常我们使用 激活，但是在 select2中，更改为 选择 = “选择”

使用 Python/Flask 的示例

HTML:

<select id="role" name="role[]" multiple="multiple" class="js-example-basic-multiple form-control">
{% for x in list%}
<option selected="selected" value="\{\{x[0]}}">\{\{x[1]}}</option>
{% endfor %}
</select>

JQuery:

$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});


$(".js-example-theme-multiple").select2({
theme: "classic",
placeholder: 'Select your option...'
});

例如:。

var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');

你可以在这里看到它 https://select2.org/programmatic-control/add-select-clear-items

这很简单。例如，我想选择默认值为2的选项:

HTML:

<select class="select2" id="selectBox">
<option value="1">Some Text</option>
<option value="2">Other Text</option>
</select>

Javascript:

$("#selectBox").val('2').trigger('change')