如何在选择选项中获取数据属性和值作为对象（使用选择的插件）

Question

我正在使用选定的插件（此处），并且我有多个选择，我想在其中获取作为对象返回的值。

这是代码：

<select class="chozen" id="entities" multiple>

   <option data-name="Joe Blow" data-id="3" data-age="27">Joe Blow</option>
   <option data-name="Trish Thompson" data-id="4" data-age="21">Trish Thompson </option>
   <option data-name="Sam Jones" data-id="5" data-age="43">Sam Jones</option>

</select>

然后我有一个按钮来获取此输入的选定值：

var vals = $("#entities").val();

它返回一个由innerHTML选定值组成的数组，如下所示：

["Joe Blow","Trish Thompson","Sam Jones"]

（注意：如果我设置了“value”属性，它会将值作为数组而不是innerHTML返回）

我想要做的是获取数据属性并将其放入对象数组中：

[
   {name:"Joe Blow",id:"3",age:"27"} ,
   ....
]

有人有什么建议吗？....

我在 chozen 文档中找不到任何内容。

Answer 1

试试这个：

jQuery.fn.extend({
        selectedAsJSON: function(){
            var result = [];
            $('option:selected', this).each(function(){
                result.push($(this).data());
            })
            return result;
        }
    });

用法：

$('#entities').selectedAsJSON();

输出将是一个对象数组，其中每个对象data-都是一个属性。

更新：重要的是要注意这将适用于任何常规select元素，而不仅仅是selected。此外，您option可能有任何data-属性，也可以使用。