jQuery创建具有选定属性和值的对象答案

【问题标题】：jQuery create object with selected attribute and valuejQuery创建具有选定属性和值的对象
【发布时间】：2021-09-03 04:14:29
【问题描述】：

我有不同的国家、城市、邮编选择选项。现在我的要求是当有人从下拉列表中更改值时，它应该创建一个具有选定值的数组对象。所以为了实现这一点，我做了这样的事情

var SearchParams = [];

jQuery('.form-type-select').each(function() {
    let Attribute = jQuery(this).attr('data-attribute-name');
    
    $(this).find("input[type='checkbox']:checked").each(function(i, e){
    obj = {};
        var self = jQuery(this).val();
        if( Attribute == 'country' ) {
            obj[Attribute] = self;
        }

        if( Attribute == 'city' ) {
            obj[Attribute] = self;
        }
        SearchParams.push(obj);
    });
});

console.log(SearchParams);

它显示这样的输出

[
    {country: 'France'}
    {country: 'UK'}
    {country: 'Spain'}
    {city : 'Toulouse'}
    {city : 'Lyon'}
    {city : 'Yorkshire'}
]

但我希望输出应该是这样的

[
    {country: 'France', 'UK', 'Spain'}
    {city : 'Toulouse', 'Lyon', 'Yorkshire'}
]

那么有人可以告诉我如何实现这一目标吗？任何帮助和建议都会非常感激。

【问题讨论】：

标签： jquery arrays sorting

【解决方案1】：

您在每次迭代时创建新的 JSON 对象，即：obj = {};。相反，您可以简单地创建键 SearchParams["country"]，然后将值推送到此键中。

演示代码：

var SearchParams = {}; //create obj
SearchParams["country"] = new Array() //create keys..
SearchParams["city"] = new Array()
jQuery('.form-type-select').each(function() {
  let Attribute = jQuery(this).attr('data-attribute-name');
  $(this).find("input[type='checkbox']:checked").each(function(i, e) {
    var self = jQuery(this).val();
    if (Attribute == 'country') {
      SearchParams["country"].push(self); //push inside key...
    }
    if (Attribute == 'city') {
      SearchParams["city"].push(self);
    }
  });
});

console.log(SearchParams);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="form-type-select" data-attribute-name="country"><input type="checkbox" value="1" checked></div>
<div class="form-type-select" data-attribute-name="city"><input type="checkbox" value="2" checked></div>
<div class="form-type-select" data-attribute-name="country"><input type="checkbox" value="7" checked></div>
<div class="form-type-select" data-attribute-name="city"><input type="checkbox" value="45" checked></div>

【讨论】：