Select2不显示所选值

时间:2013-02-19 12:23:58

标签: jquery-select2

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}

P.S。:列表中的所有项目都已加载。

::我如何初始化select2:

只需将以下行代码放在我的javascript上即可成功:

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

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

  • 首次尝试:

    $('#category').select2(
        {
            initSelection: function(element, callback) {
                callback($('#field-category').val());
            }
        }
    );
    
  • 第二次尝试:

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

P.S。:#field-category的值为隐藏的输入字段,工作正常。

谢谢,伙计们!

11 个答案:

答案 0 :(得分:50)

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

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

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

演示:Fiddle

答案 1 :(得分:27)

设置val后

添加触发器更改:

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

答案 2 :(得分:2)

解决此问题的一种非常简单的方法是:

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

答案 3 :(得分:1)

这可能有帮助:

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

您可以找到详细信息here

谢谢

答案 4 :(得分:0)

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

INIT:

$("#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})

答案 5 :(得分:0)

在Select2 4.0及更高版本中不推荐使用Per here initSelection。

使用Select2 4.0.0这对我有用:

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

答案 6 :(得分:0)

我遇到同样的问题,这对我有用:

Using Select2 4.0.0
$("#slect_id").val('3').trigger("change")

答案 7 :(得分:0)

对我来说,我在数据集中发送了选定内容,但默认选项未被选中。我必须做类似下面的事情才能让它发挥作用 -

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

答案 8 :(得分:0)

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

第一步是将我的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>

答案 9 :(得分:0)

触发只需选择2即可设置值

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

这将触发带下拉菜单的select2

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

答案 10 :(得分:0)

  var option=$(this);
   if(option.val()==data.StudentCourses.CourseId)
   {
    option.setAttribute('Selected');
   }
   });

我已经初始化了select2,因为我只希望从中选择几个选项。