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

Posted 2023-05-09

【中文标题】jQuery创建具有选定属性和值的对象

【英文标题】：jQuery create object with selected attribute and value

【发布时间】：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'
]

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

【参考方案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>