ajax设置下拉框的默认值,javascript-jQuery select2从列表中的选项设置默认值？

javascript-jQuery select2从列表中的选项设置默认值？

我希望能够使用JQuery Select2插件设置select元素的默认/选定值。

10个解决方案

53 votes

另一种方法-只需将val属性添加到"Whatever You Want"标记，然后在其上调用null。 它必须采用您选择的值。 无需额外的JavaScript。 像这样 ：

标记

Some Text

Other Text

的JavaScript

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

参见小提琴：[http://jsfiddle.net/6hZFU/]

编辑：(谢谢，杰伊·哈斯！)

如果这不起作用，请尝试将"Whatever You Want"的val属性设置为null，以清除该值，如下所示：

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

之后，将val设置为"Whatever You Want"就足够简单了。

krishgopinath answered 2020-01-02T01:25:23Z

23 votes

实现此目的的一种方法是...

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

因此，基本上，您首先要初始化插件，然后使用'val'参数指定默认值。 实际值取自指定的选项，在这种情况下为＃1。 因此，从此示例中选择的值将是“ bar”。

Some Text

Other Text

希望这对其他人有用。

user857276 answered 2020-01-02T01:25:52Z

23 votes

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

您实际上应该执行此操作……初始化然后设置该值。那么这也是它为我工作的方式。

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

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

rajesh_kw answered 2020-01-02T01:26:12Z

15 votes

上面的解决方案对我不起作用，但是来自Select2自己的网站的以下代码可以实现：

$('select').val('US'); // Select the option with a value of 'US'

$('select').trigger('change'); // Notify any JS components that the value changed

在这里找到网页

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

avebone answered 2020-01-02T01:26:41Z

8 votes

对于4.x版本

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

用INDEX选择值

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

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

Wishmaster answered 2020-01-02T01:27:09Z

1 votes

来自未来？ 寻找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]

Brain90 answered 2020-01-02T01:27:38Z

0 votes

不知道其他问题，仅此代码对我有用。

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

Fahad Bhuyian answered 2020-01-02T01:27:58Z

-1 votes

对于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

Ajeet Lakhani answered 2020-01-02T01:28:18Z

-1 votes

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

charu joshi answered 2020-01-02T01:28:33Z

-1 votes

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

$(".select").select2({

data: data_names

});

data_names.forEach(function(name) {

if (name.selected) {

$(".select").select2('val', name.id);

}

});

假设您要从数据集中将要设置为默认值的一项包含一个名为selected的附加属性，我们将使用它来设置值。

Aniket Thakur answered 2020-01-02T01:28:58Z