Question

我试图在select2-jquery组件中显示选定的值。

var select = $(".select2").select2({
    multiple: true,
    placeholder: "",
    width:'100%',
    data: z 
});
var selectedValues = $("#sourceValues").val().split(',');

$.each( selectedValues, function(k,v){
    $(".select2").select2('val',v);
})

元素sourceValues包含例如2,4的值 z是一个对象数组，它按照建议保存id和text。我可以看到链接到Select2元素的<options>，但我无法在元素上显示选定的值。此外，如果我尝试在Chrome控制台上运行查询，那么如果我写了类似的内容，那么它就可以了。

  $(".select2").select2('val',4)

因此，选择id为{4}的<option>。

Answer 1

Select2 4.0版本以防有人需要：

var selectedValues = $("#sourceValues").val().split(',');
$(".select2").val(selectedValues).trigger("change");

Answer 2

http://ivaynberg.github.io/select2/#documentation

<强> VAL

附加到选择 - 多值 - 数组的值属性   应该选择的选项。 null为空。

所以：

var selectedValues = $("#sourceValues").val().split(',');
$(".select2").select2('val',selectedValues);

Answer 3

例如在循环中创建动态数组的操作如下：

 data=[]

    for(let input of inputs){

          *//key of dynamic build*
           if(typeof data[input.name]==='undefined'){
                data[input.name]=[]}
            data[input.name].push(input.value);
            console.log(data)
        }

Answer 4

嘿，我发现并做了一些升级，并为JavaScript/jQuery set values selection in a multiple select使用ŁukaszW.pl建议，您也可以使用它：

在jQuery中：

var values = ["Test", "Prof", "Off"]; // or to take values as array from other document element;
$("#strings").val(values);
$("#strings").trigger('change'); //trigger change for select2 to set values/styles

或使用纯JavaScript：

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"]; // or to take values as array from other document element;
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}
var event = new Event('change'); 
var sel = document.getElementById("strings"); 
sel.dispatchEvent(event); //trigger change for select2 to set values/styles

jQuery在这里做了重要的抽象。

并保存:) 希望它可以帮助某人：）

Answer 5

给定：

select2 v4
从数据库中绘制页面时，“选项”获取一个php脚本

select2 必须像在数据库中一样填写。默认情况下，它呈现如下：选项值描述

我解决了这样的问题：从“select2-searchable”类中，我包含了 html atrrribute 和（来自 php）

$('.select2-searchable').each(function(i, e) { //table, interation all elements
    $(e).select2({
        minimumResultsForSearch: 1,
        width: 'resolve',
    });
    if ($(e).attr('data-reorder')) {
        $(e).on('select2:select', function(el) { //adding a new value to the end of the list
            $(this).append(el.params.data.element).trigger('change.select2');
        });
        if ($(e).attr('data-value')) { //sorting by values from the database
            $.each($(e).attr('data-value').split(','), function(j, k) {
                $(e).find('[value=' + k + ']').each(function(m, l) {
                    l.selected = true;
                    $(e).append(l).trigger('change');
                });
            });
        }
    }
});

此处的示例 (https://jsfiddle.net/M0rdent/q9gn305d/3/)

无法在Select2中设置多个值

6 个答案: