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

【问题标题】：JQuery select2 set default value from an option in list?JQuery select2从列表中的选项设置默认值？
【发布时间】：2013-06-02 21:48:24
【问题描述】：

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

【问题讨论】：

对于那些使用config.data 数据源（而不是将所有内容作为“选项”输出）的人，this answer below 是有效的:)

标签： javascript jquery html-select jquery-select2

【解决方案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！）

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

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

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

【讨论】：

我无法让上面的 JavaScript 为我工作。我确实得到了以下工作： $("#id").select2("val", null);
以上代码适用于单个值，但在多个值的情况下，只有一个值被选中

【解决方案2】：

上述解决方案对我不起作用，但 Select2 自己网站上的这段代码可以：

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

Webpage found here

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

【讨论】：

对于未来的访问者，您可以将其组合成一个命令：$('select').val('US').trigger('change');，或更短的将是$('select').val('US').change();

【解决方案3】：

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

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

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

【讨论】：

这里没有乐趣。无论有没有初始化，这根本不适用于 AJAX 数据！

【解决方案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>

希望这对其他人有用。

【讨论】：

您的 html 标记有一个类，其中包含 .。所以基本上你的代码不会设置值，因为你选择了错误的元素。
或更确切地说是一个不存在的元素:)
如果在设置选定值后需要清除按钮，请使用：$('.select').select2({allowClear: true}).select2('val', $('. select2 选项：eq(1)').val());
$('#source_timezone').val('US/Eastern').select2()
这很好用，但是如何让它选择多个选项，而不仅仅是 1？

【解决方案5】：

对于4.x版本

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

使用 INDEX

选择值

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

不选择任何内容（如果是则显示占位符）

【讨论】：

为什么它与@avebone 答案不同？我在 5 个月后看到了同样的答案。

【解决方案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

【讨论】：

这将追加一个新选项，我相信他想加载选项并选择其中一个。
这是Select2 的问题，是的，插件很好，但为什么有人需要创建新的 API 来预选数据。有或应该有一种方法来触发 ajax 查询以获取下拉菜单并预选给定值。

【解决方案7】：

第 1 步：您需要在您的选择标签中附加一个空白 option 和一个空白值。

第 2 步：在带有占位符值的 select 标记中添加 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'
});

【讨论】：

【解决方案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

【讨论】：

【解决方案9】：

不知道其他问题，只有这个代码对我有用。

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

【讨论】：

因为你没有尝试.trigger('change');

【解决方案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...'
    });

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。

【解决方案13】：

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

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

这假定在您的数据集中，您要设置为默认值的一项具有称为 selected 的附加属性，我们使用它来设置值。

【讨论】：

【解决方案14】：

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

【讨论】：