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

I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin.

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

9 个解决方案

#1

One more way - just add a selected = "selected" attribute to the select markup and call select2 on it. It must take your selected value. No need for extra JavaScript. Like this :

还有一种方法 - 只需在select标记中添加一个selected =“selected”属性，然后在其上调用select2。它必须采用您选择的值。无需额外的JavaScript。喜欢这个 ：

Markup

标记

<select class="select2">
   <option id="foo">Some Text</option>
   <option id="bar" selected="selected">Other Text</option>
</select>

JavaScript

JavaScript的

$('select').select2(); //oh yes just this!

See fiddle : http://jsfiddle.net/6hZFU/

见小提琴：http：//jsfiddle.net/6hZFU/

Edit: (Thanks, Jay Haase!)

编辑:(谢谢，Jay Haase！）

If this doesn't work, try setting the val property of select2 to null, to clear the value, like this:

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

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

After this, it is simple enough to set val to "Whatever You Want".

在此之后，将val设置为“Whatever You Want”非常简单。

#2

One way to accomplish this is...

实现这一目标的一种方法是......

$('select').select2().select2('val', $('.select2 option:eq(1)').val());

So basically you first initalize the plugin then specify the default value using the 'val' parameter. The actual value is taken from the specified option, in this case #1. So the selected value from this example would be "bar".

所以基本上你首先将插件初始化，然后使用'val'参数指定默认值。实际值取自指定选项，在本例中为＃1。因此，此示例中的选定值将为“bar”。

<select class=".select2">
  <option id="foo">Some Text</option>
  <option id="bar">Other Text</option>
</select>

Hope this is useful to someone else.

希望这对其他人有用。

#3

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

You should actually do this...intialise and then set the value..well this is also the way it worked for me.

你应该真的这样做...初始化，然后设置值..这也是它对我有用的方式。

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

#4

The above solutions did not work for me, but this code from Select2's own website did:

以上解决方案对我不起作用，但是来自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

网页在这里找到

Hope this helps for anyone who is struggling, like I was.

希望这对任何正在挣扎的人都有帮助，就像我一样。

#5

For 4.x version

对于4.x版本

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

to select value with INDEX

用INDEX选择值

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

to select nothing (show placeholder if it is)

什么都不选（如果是的话显示占位符）

#6

For ajax select2 multiple select dropdown i did like this;

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

#7

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

#8

If you are using an array data source you can do something like below -

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

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

This assumes that out of your data set the one item which you want to set as default has an additional attribute called selected and we use that to set the value.

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

#9

How is this?

这怎么样？

Markup

标记

<select>
   <option value="foo">Some Text</option>
   <option value="bar">Other Text</option>
</select>

JavaScript

JavaScript的

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