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

Question

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

Answer 1

还有一种方法 - 只需selected = "selected"在select标记中添加一个属性并调用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!)

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

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

在此之后,设置val为足够简单"Whatever You Want".

Answer 2

实现这一目标的一种方法是......

$('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>

希望这对其他人有用.

Answer 3

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

你应该真的这样做...初始化然后设置值..这也是它对我有用的方式.

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

Answer 4

以上解决方案对我不起作用,但Select2自己的网站上的代码做了:

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

网页在这里找到

希望这对任何正在挣扎的人都有帮助,就像我一样.

Answer 5

对于4.x版本

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

用INDEX选择值

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

什么都不选(如果是的话显示占位符)

Answer 6

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

Answer 7

第 1 步：您需要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'
});