如何在多个输入字段中获取字段索引？

Question

我有很多选择框，像这样：

<select class="variants" name="variant[Color]" data-type="Color">
  // ... options here
</select>

<select class="variants" name="variant[Size]" data-type="Size">
  // ... options here
</select>

<select class="variants" name="variant[Brand]" data-type="Brand">
  // ... options here
</select>

然后我通过 Ajax 发送这个，当用户点击提交按钮时：

$.post('some_url.php', {
    id: $(this).attr('data-id'),
    amount: $('#amount').val(),
    variants: JSON.stringify(variants)
},
function(data) {
    // some code here
});

一切正常，我只需在数组variants 中设置所有选择框的值，如下所示：

variants: { Color: "Blue", Size: "45", Brand: "Some Brand" }

怎么做？我试过这个：

$('.variants').each(function(i, obj) {
    variants[$(obj).attr('data-type')] = $(obj).val();
});

console.log(variants); // here I see an array

但在$.post 控制台中有这样的：

amount      1
id          14217
variants    []

为什么？

Answer 1

选择框是动态的，它并不总是颜色、尺寸和品牌；可以有各种变体名称

在这种情况下，您可以遍历 .variant 元素并使用正则表达式来提取变体的类型，并将其作为键应用于可以在 AJAX 请求中传递的对象。试试这个：

var variants = {};
$('.variants').each(function() {
    var name = this.name.match(/variant\[(.+)\]/i)[1];
    variants[name] = $(this).val();
});

$.post('some_url.php', {
    id: $(this).data('id'),
    amount: $('#amount').val(),
    variants: variants
}, function(data) {
    // some code here
});

Example fiddle

请注意，您不需要在 variants 对象上使用 JSON.stringify - 无论如何，jQuery 都会在内部为您执行此操作。