选择2将值从一个select2复制到另一个

时间:2015-03-15 13:53:21

标签: jquery jquery-select2

我有一个全局select2控件,当单击一个按钮时,我想获取所选的值并用它们填充各种其他select2控件。

如何将选定值从一个select2控件复制到另一个?

我尝试了以下内容:

//Set Up control where values will copy to
$(hashElement).select2({
            multiple: true,
            data: Details,
            initSelection: function (element, callback) {
                data = $.parseJSON(element.val());
                callback(data);
            }
        });


var ApplyGlobalValues = function () {
        // get hashtag values 
        var values = $("#SelectGlobal").select2("val");
        $(".select-children").select2('val', values).trigger("change");
    }

按钮触发ApplyGlobalValues()并触发initSelection,但不会填充值。我究竟做错了什么?

1 个答案:

答案 0 :(得分:2)

下面我创建了一个将select2的值复制到另一个select2的示例。第一个技巧是,当您使用initSelection时,必须在html输入元素上设置默认值属性。第二个技巧是,您必须获取select2元素的'data'属性而不是'val'属性,以将值作为对象数组获取。

<强> HTML:

<input id="select2example1" type="hidden" value="1,1,2">
<input id="select2example2" type="hidden" value="1,1,2">
<input type="button" id="mybutton" value="copy to other select2">

<强> JS:

var data = [{
        id: 1,
        text: "A"
    }, {
        id: 2,
        text: "B"
    }, {
        id: 3,
        text: "C"
    }];


    $("#select2example1").select2({
        multiple: true,
        data: data,
        initSelection: function (element, callback) {
            var data = [{ id: 1, text: 'A' }, { id: 3, text: 'C' }];
            callback(data);
        }
    });

    $("#select2example1").select2('val', '1,2');

    var ApplyGlobalValues = function () {

        var values = $("#select2example1").select2("data");
        $('#select2example2').select2({
            multiple: true,
            data: data,
            initSelection: function (element, callback) {
                var data = values;
                callback(data);
            }
        });
    }

    $("#mybutton").click(function () {
        ApplyGlobalValues();
    });

另见: http://jsfiddle.net/08us1mg5/