39

Select2 成功加载列表中的所有项目，这是我在页面加载时尝试选择特定值时发现的问题。例子：

:: 将 select2 放在特定的 html 元素中，即使加载了所有项目，也不会选择任何值。

$('#my_id').select2();

:: 加载页面时，我试图显示选定的特定项目，但不能按预期工作，因为即使选择了，select2 也不会显示它。

$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.

如何在页面加载时弹出选定的选项？

提前致谢。

更新

:: 我如何加载所有 select2 项目（对不起，它的玉，不是纯 HTML）：

label(for='category') Category
    span.required *
select(id='category', style='width:230px', name='category')
    option(value='') - Select -
    each cat in categories
        option(value='#{cat.id}') #{cat.description}

PS：我列表中的所有项目都已加载。

::我如何初始化select2：

只需将以下行代码放在我的 javascript 上，它就成功了：

$('#category').select2();

:: 我如何尝试选择特定值：

  • 第一次尝试：

    $('#category').select2(
    {
        initSelection: function(element, callback) {
            callback($('#field-category').val());
        }
    }
);

  • 第二次尝试：

    $('#category').val($('#field-category').val());

PS：#field-category有一个隐藏输入字段的值并且可以正常工作。

多谢你们！

4

11 回答 11

55

您需要使用initSelection选项来设置初始值。

如果你使用预定义的select元素来创建select2，你可以使用下面的方法

$('select').select2().select2('val','3')

演示：小提琴

于 2013-02-19T12:28:52.137 回答
35

设置 val 后添加触发器更改：

$('#my_id').val('3').trigger('change');
于 2014-11-11T03:42:07.767 回答
4

解决这个问题的一个非常简单的方法是：

//Step1: Here assuming id of your selectbox is my_id, so this will add selected attribute to 1st option
$('#my_id option').eq(0).prop('selected',true);

//Step2: Now reinitialize your select box

//This will work, if you haven't initialized selectbox
$('#my_id').select2();

或者

//This will work, if you have initialized selectbox earlier, so destroy it first and initialise it
$('#my_id').select2('destroy').select2();
于 2018-02-13T06:25:36.587 回答
3

这可能会有所帮助：

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

您可以在此处找到更多详细信息：

谢谢

于 2019-01-03T02:18:15.173 回答
0

这是如何val在 select2 中只选择相应的元素。出于某种原因，select2 不提供按 id 查找选择的功能。

在里面：

$("#thing").select2({data:sources, initSelection: function(item, callback) {
  // despite select2 having already read the whole sources list when you 
  // do .val(n) you have to explicitly tell it how to find that item again.
  var to_be_selected = null;
  $.each(sources, function(index, thing) {
    if (thing.id == item.val()) {
      to_be_selected = thing;
      return;
    }
  })
  callback(to_be_selected);
}})

普通代码

// to load the thing with id==3 from the initial sources list.
$("#thing").select2({'val': 3})
于 2013-06-23T06:04:25.417 回答
0

Per here initSelection 在 Select2 4.0 及更高版本中已弃用。

使用 Select2 4.0.0 这对我有用：

$('#my_id').select2({val:3});

HT：@Kokizzu

于 2015-05-04T19:07:06.137 回答
0

对我来说，我在数据集中发送选择仍然没有选择默认选项。我必须做类似下面的事情才能让它工作 -

$(".select").select2({
    data: data_names
});
data_names.forEach(function(name) {
    if (name.selected) {
        $(".select").select2('val', name.id);
    }
});
于 2017-12-10T16:35:23.043 回答
0

只需触发 select2 即可设置值

$('#my_id').val('3').trigger("change.select2");

这将通过下拉菜单触发 select2

$('#my_id').val('3').trigger("change");
于 2020-02-19T15:44:27.787 回答
0 
  var option=$(this);
   if(option.val()==data.StudentCourses.CourseId)
   {
    option.setAttribute('Selected');
   }
   });

我已经初始化了 select2，因为我只想从中选择几个选项。

于 2020-10-06T06:56:40.787 回答
0

我有一个带有多个选择的多个 select2 框。

第 1 步是将我的 school_ids 字符串放入与每个学校的 id 对应的整数数组中，并删除前导零。我必须在单独的脚本标签中执行此操作。

<script>
    var school_ids = <%= raw JSON.parse(@search.school_ids).map{|x| x.to_i} - [0]%>
</script>

第二步是创建选择框，然后设置值，然后像这样触发：

<script>
$(document).ready(function() {
        $('.select2-multiple').select2({
            placeholder: "Hit Enter After Selection",
            width: 'resolve'
        });
        $('.select2-multiple').val(school_ids);
        $('.select2-multiple').trigger('change');
</script>
于 2019-05-22T02:10:06.283 回答
0

我遇到了同样的问题，这对我有用：</p> 

Using Select2 > 4.0.0
$('#select_id').val('3').trigger('change');
于 2016-07-07T03:31:01.310 回答