Select2不显示所选值

Question

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有一个隐藏输入字段的值,工作正常.

多谢你们!

Answer 1

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

如果使用预定义select元素来创建select2,则可以使用以下方法

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

演示:小提琴

Answer 2

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

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

Answer 3

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

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

Answer 4

这可能会有所帮助：

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

您可以在这里找到更多详细信息：

谢谢