我正在为我的客户网上商店创建一个简单的控制面板，我需要将产品颜色选项存储在与表中产品相同的行中。
我有这两个输入字段：
<input class="form-control" name="color[]" placeholder="Color">
<input class="form-control" name="price[]" type="text" placeholder="0.00">
我想创建一个与此类似的 JSON 字符串，以便将其存储在数据库中并稍后使用：
{"colors":{"Red":"0.00"}}
然而，这里有一个转折点：
我的客户可以根据需要多次复制这两个输入字段，我应该从中生成 json。
$("input[name='color[]'],input[name='price[]']").serializeArray();
只是给我：
[Object Object]
所以我一定做错了什么。
序列化表格：
console.log(JSON.stringify($("form").serializeArray()));
或者您可以保留当前的逻辑并对其进行字符串化：
console.log(JSON.stringify($("input[name='color[]'],input[name='price[]']").serializeArray()));
例如，这个小提琴：
保持你的 jQuery 选择器如何拥有它：
$("input[name='color[]'],input[name='price[]']").serializeArray();
结果是对象，但没关系！如果你序列化结果，你会看到你得到了什么。结果不会像你想要的那样 100%。正如你所看到的，所有的输入都在那里，但是没有一种真正可靠的方法来知道哪种价格与哪种颜色相配。
[{"name":"color[]","value":"red"},
{"name":"price[]","value":"3.00"},
{"name":"color[]","value":"blue"},
{"name":"price[]","value":"2.00"}]
如果您编辑命名数组以具有分组编号，那么您将能够知道哪些值属于一起。例如，如果您有两个分组，则输入名称将如下所示：
<!-- Group 1 -->
<input class="form-control" name="color[0]" placeholder="Color">
<input class="form-control" name="price[0]" type="text" placeholder="0.00">
<!-- Group 2 -->
<input class="form-control" name="color[1]" placeholder="Color">
<input class="form-control" name="price[1]" type="text" placeholder="0.00">
现在，我们有一种简单的方法来确定哪种颜色与哪种价格搭配，但我们需要稍微更新我们的选择器以说明数组中有一个数字：
$("input[name^='color[',input[name^='price[']").serializeArray();
现在我们知道了我们的颜色到价格分组：
[{"name":"color[0]","value":"red"},
{"name":"price[0]","value":"3.00"},
{"name":"color[1]","value":"blue"},
{"name":"price[1]","value":"2.00"}]
以编程方式添加新输入，我们必须为新输入维护组。只需计算当前颜色输入的数量并将其用作新值（因为我们的列表是从零开始的）。
$('#addColor').click(function(){
var numColors = $("input[name^='color[']").length;
var colorInput = '<input class="form-control" name="color[' + numColors + ']" placeholder="Color" />';
var priceInput = '<input class="form-control" name="price[' + numColors + ']" placeholder="0.00" />';
$("#colors").append(colorInput);
$("#colors").append(priceInput);
});
这将使用正确的组号创建新输入：
<input class="form-control" name="color[3]" placeholder="Color">
<input class="form-control" name="price[3]" placeholder="0.00">
首先，将颜色和价格分成 2 个不同的数组更容易。我们将使用组号来确定哪个价格与哪个颜色搭配：
var colors = $("input[name^='color[']").serializeArray();
var prices = $("input[name^='price[']").serializeArray();
循环遍历颜色。对于每种颜色，获取其分组编号。为此，我们将在name属性上使用正则表达式。然后，使用该分组编号，找到匹配的价格。为此，我们必须遍历价格。这并不像听起来那么慢，很可能这将是我们检查的第一个价格，因为输入是有序的。但我不相信顺序是由 保证的serializeArray，所以我们循环以防万一。当我们找到匹配的价格时，保存它的值，然后从价格数组中删除它，将下一个价格排队，我们需要下一个颜色。
var finalResults = {};
var colors = $("input[name^='color[']").serializeArray();
var prices = $("input[name^='price[']").serializeArray();
var rowPattern = /\[(\d+)\]$/; // Gets the group number inside []
var groupNum = 0;
// For each color, we have to find its matching price
$(colors).each( function(index, input){
var groupNum = rowPattern.exec(input.name)[1];
var myPrice = null;
for(var i=0; i < prices.length; i++){
if(prices[i].name = "price[" + groupNum + "]"){
myPrice = prices[i].value;
// remove price from list for faster future lookups
prices.splice(i,1);
break;
}
}
finalResults[input.value] = myPrice;
});
finalResults = {"Colors": finalResults};
console.log(JSON.stringify(finalResults));
您需要.serializeArray()在父<form>元素上使用，而不是输入字段！但serializeArray可能不会以您期望的格式返回结果。这是一个按您希望的方式执行此操作的函数。将 jQuery 参考传递给你<from>喜欢的：createColorJSON($('#myForm')).
function createColorJSON($form){
var colors = $form.find("input[name='color[]']"),
prices = $form.find("input[name='price[]']"),
object = {colors:{}};
if (colors.length !== prices.length) throw new Error('Form element number mismatch');
for (var i = 0; i < ilength; i++){
var color = colors.eq(i).val(),
price = prices.eq(i).val();
object.colors[color] = price;
}
return object;
}