Javascript JQuery从列表中的选项中选择2设置默认值？

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

实现这一点的一种方法是

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

希望这对其他人有用。

还有一种方法-只需在选择标记中添加一个selected=selected属性并调用select2即可。它必须采用您选择的值。不需要额外的JavaScript。像这样：

加价

参见小提琴：

编辑：谢谢，杰·哈斯

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

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

在此之后，将val设置为您想要的任何值都非常简单

你应该这样做…初始化然后设置值…这也是我的工作方式

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

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

---

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

---

上述解决方案对我不起作用，但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);
    }
});

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

对于4.x版本

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

使用索引选择值的步骤

---

如果是“不知道其他人”问题，则选择“不显示占位符”，只有此代码适用于我

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

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

不客气

参考：

---

步骤1：您需要在select标记中附加一个空白选项和一个空白值

步骤2：使用占位符值在select标记中添加数据占位符属性

HTML

或

---

您的html标记有一个带有。在里面。因此，基本上您的代码不会设置值，因为您选择了错误的元素。或者更确切地说，是一个不存在的元素：如果您在设置所选值后需要清除按钮，请使用：$'.select'.select2{allowClear:true}.select2'val'，$'。select2选项：eq1.val；$'source_timezone'.val'US/Eastern'.select2这很好，但是如何让它选择多个选项，而不仅仅是1？我无法让上面的JavaScript为我工作。我确实做到了以下几点：$id.select2val，null；以上代码适用于单个值，但在多个值的情况下，仅选择一个值。请使用更多信息进行编辑。不鼓励只编码并尝试此答案，因为它们不包含可搜索的内容，并且不解释为什么有人应该尝试此答案。我们在这里努力成为知识的源泉。这里没有快乐。不管有没有初始化，这都不能用于AJAX数据！对于将来的访问者，您可以将其组合成一个命令：$'select'.val'US'.trigger'change'；，甚至更短的是$'select'.val'US'.change；对于那些使用config.data数据源而不是将所有内容作为“选项”输出的人来说，这是一个有效的方法：为什么它与@aveboneanswer不同？5个月后我看到了同样的答案。因为你没有尝试。触发“改变”；这将附加一个新选项，我相信他希望加载选项并选择其中一个。这是Select2的问题，是的，插件很好，但为什么有人需要创建一个新的API来预选数据。有或者应该有一种方法触发ajax查询，以获取下拉列表并预选给定值。

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

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

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

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

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

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