我有很多选择框,如下:
<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 []
为什么?
答案 0 :(得分: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
});
请注意,您不需要在JSON.stringify
对象上使用variants
- 无论如何,jQuery都会在内部为您执行此操作。