Javascript 将表单中的某些输入转换为数组

我有一个包含许多输入的表单，但我在这里关注的两个表单分别命名为

attributes[]

和

options[$index][]

这就是我的

attributes[]

输入中的示例数据：

Array
(
    [0] => Size
    [1] => Color
    [2] => Material
)

Note: The above is the $_POST data visualized as PHP array
Below is what the HTML form would look like:

<input name="attributes[]" value="Size">
<input name="attributes[]" value="Color">
<input name="attributes[]" value="Material">

Array
(
    [1] => Array
        (
            [0] => Small
            [1] => Medium
            [2] => Large
            [3] => 
        )

    [2] => Array
        (
            [0] => Red
            [1] => Blue
            [2] => Green
            [3] => 
        )

    [3] => Array
        (
            [0] => Cotton
            [1] => Wool
            [2] => 
        )

)

Note: The above is the $_POST data visualized as PHP array
Below is what the HTML form would look like:

<input name="options[1][]" value="Small">
<input name="options[1][]" value="Medium">
<input name="options[1][]" value="Large">

<input name="options[2][]" value="Red">
<input name="options[2][]" value="Blue">
<input name="options[2][]" value="Green">

<input name="options[3][]" value="Cotton">
<input name="options[3][]" value="Wool">

（注意，

attributes[]

中的索引值有时可能与

options[$index][]

上相应数组上的索引值不匹配。）

我正在尝试动态创建一个表，其中

attributes[]

中的每个非空元素都有一列，可用选项的每个组合都有一行，因此对于上面的表，示例表是这样的：

+-------+-------+----------+-----+
| Size  | Color | Material | SKU |
+-------+-------+----------+-----+
| Small | Red   | Cotton   | 100 |
| Small | Red   | Wool     | 101 |
| Small | Blue  | Cotton   | 102 |
| Small | Blue  | Wool     | 103 |
| Small | Green | Cotton   | 104 |
| ...   | ...   | ...      | ... |

我已经有了一个计算数组笛卡尔积的函数，它输出一个数组与组合（ref:）

我不确定如何从输入中获取所有值，将它们转换为数组并将它们输入

CartProd（）

函数。这一点我主要关心的是

选项[$index][

输入。

根据上面的样本数据，这就是我想要制作的：

[小、中、大][红、蓝、绿][棉、毛]

这是小提琴

---

您确定此标记正确吗？对我来说，这看起来像PHP。示例数据是从codeigniter的分析功能复制的。我将更新这个问题来澄清。它实际上是PHP，但无论如何，如果您想要jQuery结果。那么您是否尝试过使用

.serialize（）

？这可能会帮助您查询数据以提交数据。它实际上不是PHP。我试图在不刷新页面的情况下，根据用户输入动态创建表。谢谢您的回答，但是这个解决方案有一个小问题。我必须将数据作为多个数组（而不是数组数组）输入函数。示例：

cartProd（[小，中，大]，[红，蓝，绿]，[棉，毛]）

use:Function.apply然后使用结果数组：cartProd.apply（此，数据）；我理解了关于

cart.Prod.apply（这个，数据）

的第二部分，但不是第一部分。在哪里使用Function.apply？函数是javascript中的对象，它们有方法。apply方法执行一个函数，将数组的元素作为参数传递给函数，因此：cartProd（[small，medium，large]，[Red，Blue，Green]，[Cotton，Wool]）与cartProd.apply相同（这个，[[small，medium，large]，[Red，Blue，Green]，[Cotton，Wool]）。再次检查小提琴，我刚刚更新它以演示它。或者您可以替换

returnaddto（[]，Array.prototype.slice.call（arguments））带有
返回addTo（[]，paramArray），并使用函数而不使用。应用方法：
cartProd（data）
。
var yourSampleData =
  (function (allInputs, _, _out, _trimstr, _attrIdxs, _safereg) {
  _attrIdxs(allInputs)
    .forEach(
      function (idx) {
        _out.push(
          _.filter.call(
            allInputs,
            function (input) {
              return (new RegExp("^options\\[" + _safereg(idx) + "\\]"))
                .test(String(input.name)) && _trimstr(input.value).length;
            }
          )
          .map(
            function (validinput) {
              return _trimstr(validinput.value);
            }
          )
        );
      }
  );
  return _out;
})(

  document.getElementsByTagName("input"),

  Array.prototype,

  [],

  // _trimstr
  (function () {
    var blanks = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
    return function (str) {
      return String(str).replace(blanks, "");
    };
  })(),

  // _attrIdxs
  (function () {

    var _ = Array.prototype;
    var attrMatcher = /^attributes/;
    var idxMatcher = /^attributes\[(.+?)\]/;

    return function (allInputs) {
      var out = [];
      _.filter.call(
        allInputs,
        function (input) {
          return attrMatcher.test(String(input.name));
        }
      )
        .forEach(
          function (input) {
            var ind;
            ( out
              .indexOf( ind = +String(input.name).match(idxMatcher)[1] ) ^ -1
            ) || out.push( ind );
          }
      );
      return out;
    };
  })(),

  // _safereg
  (function (REGEX_ESCAPER) {
    return function (strreg) {
      return String(strreg).replace(REGEX_ESCAPER, '\\$1');
    }
  })(/([.*+?\^=!:${}()|\[\]\/\\])/g)

);


//
// and with your cartesian function:
//
//   var
//      cProd = cartProd.apply( this, yourSampleData );
//

console.log( yourSampleData );
//
//
//