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

【问题标题】：How to get data attributes and values as object in select options (using chosen plugin)如何在选择选项中获取数据属性和值作为对象（使用选择的插件）
【发布时间】：2015-07-25 01:14:56
【问题描述】：

我正在使用所选插件 (here)，并且我有一个多项选择，我想在其中获取作为对象返回的值。

代码如下：

<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 文档中找不到任何内容。

【问题讨论】：

标签： jquery jquery-chosen

【解决方案1】：

试试这个：

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

用法：

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

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

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

【讨论】：

@choz 好吧，我们正在向全局 jQuery 对象添加一个扩展方法。它可以被任何 jQuery 选择器调用，这应该导致一个空数组。不是真的问题:)
哇，简单就是强大。明天会出这个。谢！ :)
@WalkerFarrow 很高兴为您提供帮助 :)

【解决方案2】：

使用$.val() 你只会得到输入/选择的值，尝试使用:selected 选择器来获取整个元素。我的工作样本：

https://jsfiddle.net/rj8j5v0j/

你必须实现的代码：

// build an array
var data = [];
$("#entities option:selected").map(function(){
    // push each selected option as an object with name, id and age
    data.push({
        name: $(this).data('name'),
        id: $(this).data('id'),
        age: $(this).data('age')
    });
});

【讨论】：

【解决方案3】：

这对我有用：

$(document).on( 'change' , ‘.myselect’ , function() {
    console.log( $('.myselect option:selected').data(‘value’) );
});

基本上，我得到了原始<select> 中的选定选项，然后得到了该元素的数据属性。 Chosen 为您提供了 <select> 的克隆版本，因此您必须通过两次查询选择器来获取原始引用。

$('select').chosen();

$(document).on('change', '#mySelect', function(e) {
  var r = $('#mySelect option:selected').data('customF');
  $("#result").html(r);
});

<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script>

<div class="col-md-12">
  <select class="form-control" id="mySelect">
    <option value="value1" data-custom-f="Cool">Option 1</option>
    <option value="value2" data-custom-f="Awesome">Option 2</option>
  </select>
  <div id="result"></div>
</div>

View on JSFiddle

【讨论】：

【解决方案4】：

我也没有在插件文档中看到任何内容，但是您可以使用小的 jQuery 函数来实现您所需要的：

function returnSelectAsArray($object){    
    var dataArray = [],
        $selectedOptions = $object.find('option').filter(':selected'),
        $option;

    $selectedOptions.each(function(){        
        $option = $(this);
        dataArray.push({
            name: $option.attr('data-name'),
            id: $option.attr('data-id'),
            age: $option.attr('data-age'),
        });
    });
    return dataArray;
}

$('#entities').on('change chosen:change', function(){    
    console.log(returnSelectAsArray($(this)));
});

JSFiddle

【讨论】：