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

Question

我想使用JQuery Select2插件来设置下拉框(select元素)的默认/选定值。

- user857276

---

对于那些使用 config.data 数据源（而不是将所有内容输出为“选项”）的人，请参考下面的答案：这个回答 是可行的 :) - random_user_name

Answer 1

另外一种方法 - 只需在 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"就足够简单了。

- krishwader

---

我无法让上述 JavaScript 代码正常运行，但我成功让以下代码正常工作：$("#id").select2("val", null);。 - Jay Haase

以上代码对于单个值可以正常工作，但是在多个值的情况下只有一个值被选中。 - Sandeep Gantait

Answer 2

上述解决方案对我无效，但 Select2 官网上的这段代码有效：

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

此处找到网页

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

- avebone

---

为了未来的访问者，您可以将此组合为单个命令：$('select').val('US').trigger('change');，甚至更短的方式是 $('select').val('US').change();。 - random_user_name

Answer 3

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

你实际上应该这样做......初始化并设置值......这也是对我有效的方法。

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

- rajesh_kw

---

没有成功。无论是否初始化，这在处理AJAX数据时都不起作用！ - MC9000

Answer 4

达到这个目标的方法之一是...

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

希望对其他人有所帮助。

- user857276

---

你的 HTML 标记上有一个含有 . 的类。因此，基本上，你的代码不会设置该值，因为你选择了错误的元素。 - krishwader

或者说是一个不存在的元素 :) - krishwader

如果您需要在设置选定值后添加清除按钮，请使用以下代码：$('.select').select2({allowClear: true}).select2('val', $('.select2 option:eq(1)').val()); - Adrian P.

$('#source_timezone').val('US/Eastern').select2() - Roy Hyunjin Han

这个功能很棒，但是如何让它选择多个选项，而不仅仅是其中一个？ - TheTC

Answer 5

对于4.x版本

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

使用 INDEX 选择数值

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

选择不选中任何选项（如果有占位符则显示占位符）

- Wishmaster

---

为什么这个答案和@avebone的答案不同？我看到相同的答案是5个月后发布的。 - Yevgeniy Afanasyev

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

- Brain90

---

这将会追加一个新选项，我相信他想要加载选项并选择其中之一。 - Marcelo Agimóvel

这是一个与Select2相关的问题，插件本身没有问题，但为什么需要创建一个新的API来预先选择数据呢？应该有一种方法来触发AJAX查询以获取下拉列表并预先选择给定的值。 - Bosco

Answer 7

步骤1：您需要在选择标签中添加一个值为空白的空白option。

步骤2：在选择标签中添加data-placeholder属性，并设置占位符的值。

HTML

<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'
});

- Soubhagya Kumar Barik

Answer 8

例如

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

- zteezy

---

如何处理多个属性，而不仅仅是id和文本，还包括自定义属性？ - Mark Anthony Libres

Answer 9

很容易。例如我想在默认情况下选择值为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')

- Saeed.Modarresi

Answer 10

通常我们使用active，但在select2中，更改为selected="selected" 使用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...'
    });

- Andres Rave