多选Bootstrap-select生成指定结构JSON数组异常求助

问题回顾 #

你期望生成的JSON数组格式是：

[ { "title": "Name" }, { "title": "Phone" }, { "title": "Parent Phone" }, { "title": "Street" } ]

但实际得到的却是：

[{"title":["Arabic Name","Phone","Building","Nationality"]}]

问题原因 #

问题出在你遍历的对象上：$("#db_fields")选中的是整个select组件，而非选中的选项。对于多选select，调用$(this).val()会直接返回所有选中值的数组，所以你最终只往数组里push了一个包含数组的对象，而非多个独立的{title: ...}对象。

修正方案 #

你需要遍历的是选中的option元素，而非整个select。修改代码如下：

方法1：使用$.each遍历选中选项

var favorite = new Array();
// 目标改为选中的option，而非select本身
$.each($("#db_fields option:selected"), function() {
    var field = { 'title': $(this).val() };
    favorite.push(field);
});
var myJsonString = JSON.stringify(favorite);
alert(myJsonString);

方法2：更简洁的map写法

// 用map直接生成目标数组，再转JSON
var favorite = $("#db_fields option:selected").map(function() {
    return { title: $(this).val() };
}).get();
var myJsonString = JSON.stringify(favorite);
alert(myJsonString);

原理说明 #

$("#db_fields option:selected")会获取所有被选中的<option>元素，遍历每个元素时，$(this).val()就是单个选项的value值。这样每次循环都会生成一个独立的{title: 选项值}对象，最终数组的结构就和你预期的一致了。

内容的提问来源于stack exchange，提问作者Mohamed Fradi