在动态创建的select2多选上获取多维数组

Question

我想使用 select2 多选来实现一个多维数组，如下所示

var options = [['20mg', '40mg'],
               ['Capsule', 'Tablet', 'Syrup'],
               ['Small', 'Medium', 'Large']];

但我得到以下输出：[从堆栈溢出中获取此代码]

["20mg", "40mg", "Capsule", "Tablet"]

这是我在 jsbin 上的代码 https://jsbin.com/mayiza/edit?html,js,console,output

我错过了一些东西。我尝试过其他方法。但他们都没有按照我正在寻找的方式工作。

我的代码是：

var test = $(".attributeFormWrapper");
test.on("select2:select", function (event) {
        var values = [];
        // copy all option values from selected
        $(event.currentTarget).find("option:selected").each(function (i, selected) {
            values[i] = $(selected).text();
        });

        console.log("selected values: ", values);

});

select2 的 HTML 代码

<div class="attributeFormWrapper">
    <div class="attributeFormRepeat">
        <div class="col-md-12 select2Divs">
            <div class="col-md-6">
                 <div class="row">
                     <div class="form-group">
                         <div class="col-md-11">
                              <label>Attribute (e.g. Color, Size, Stength, Type)</label>
                              <select class="form-control select2ProductAttribute commonSelect2" style="width: 100%;"></select>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="col-md-6">
                 <div class="row">
                     <div class="form-group">
                         <div class="col-md-11">
                             <label>Attribute Value (e.g. Green, 20mg, Capsule)</label>
                             <select class="form-control select2AttributeValues commonSelect2" style="width: 100%;" multiple="multiple"></select>
                         </div>
                     </div>
                 </div>
             </div>
        </div>
        <div class="clearfix"></div>
   </div>

添加新属性

下面动态添加了select2方法：

 function addrow() {

        var rowToBeCloned = $('.attributeFormWrapper .attributeFormRepeat:last');

        $(".select2ProductAttribute").select2('destroy');
        $(".select2AttributeValues").select2('destroy');


        var newrow = rowToBeCloned.clone();

        $(".attributeFormWrapper").append(newrow);

        selectAttribute();
        $(".select2ProductAttribute").last().val("").trigger("change.select2");
        selectAttributeValues();
        $(".select2AttributeValues").last().val("").trigger("change.select2");

    }

我要添加 select2 div 的按钮单击事件

 $("#addAttributeDivBtn").click(function() {
        addrow();
 });

Answer 1

您需要一个数组，如下所示：

var array = [
0: [ 'e1a' ,'e2a', 'e3a' ],
1: [ 'e1b', 'e2b', 'e3b']
];

但是您正在添加这样的数组：

var array = ['e1a','e2a',...'e1b','e2b'];

尝试将选定的值分开，然后按照你需要的方式准备一个对象或数组。

创建空数组：

var array_empty = [];
var select1; // values from first select
var select2; // values from second select
array_empty.push( select1 );
array_empty.push( select2 );

类似的东西:-)（凭记忆写）

$('.select2-elem').each( function(i,e) {
    var values = $(this).val(); // getting selected values each of select element
    array_empty.push( values );

});