如何在多個輸入字段中獲取字段索引？

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的會爲你做這個內部反正。