将多选值设置为 json 格式

Question

我有多选框，我想获取值并以下面的json格式制作它。multiselectbox值是一个数组值。

{"username":{"user1":"user1","user2":"user2","user3":"user3"},

 "geo":{"geo1":"geo1","geo2":"geo2"},

 "week":{"week2":"week2","week4":"week4"} 

} 

$(".go").click(function(){

   var filter =[];

  var username=$( "#username" ).val();

  var geo=$( "#geo" ).val();

  var week=$( "#week" ).val();

  var team=$( "#team" ).val();

  filter[username]=username;

  filter[geo]=geo;

  filter[week]=week;

  filter[team]=team;

  

  console.log(filter[username]);

  var userarr=JSON.stringify(filter);

  console.log(userarr);

 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-popup" id="filter" style="display: block;">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <select id="username" multiple=""><option selected="true" disabled="">Username</option><option>user1</option><option>user2</option><option>user3</option><option>user4</option></select>

 <select id="geo" multiple=""><option selected="true" disabled="">Geo</option><option>chennai</option><option>covai</option><option>hydrabad</option><option>cochin</option><option>mumbai</option></select>

 <select id="week" multiple=""><option selected="true" disabled="">Weeks</option><option>week1</option><option>week2</option><option>week3</option><option>week4</option></select>

 <select id="team" multiple=""><option selected="true" disabled="">Teams</option><option>Java</option><option>Lamp</option><option>Oracle</option><option>Sales</option></select>

 <button class="go">GO</button>

 </div>

Answer 1

您的主要问题是 。您正在将筛选器设置为 ARRAY。您希望它是具有特定键名的对象。var filter =[];$(".go").click(function(){&nbsp; const filter = {&nbsp; &nbsp; username: $("#username").val(),&nbsp; &nbsp; geo: $("#geo").val(),&nbsp; &nbsp; week: $("#week").val(),&nbsp; &nbsp; team: $("#team").val(),&nbsp; };&nbsp; const otherFilterFormat = Object.keys(filter).reduce((a, c) => {&nbsp; &nbsp; a[c] = filter[c].reduce((x, y) => {&nbsp; &nbsp; &nbsp; x[y] = y;&nbsp; &nbsp; &nbsp; return x;&nbsp; &nbsp; }, {});&nbsp; &nbsp; return a;&nbsp; }, {});&nbsp; console.log(filter, otherFilterFormat);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-popup" id="filter" style="display: block;">&nbsp;<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>&nbsp;<select id="username" multiple=""><option selected="true" disabled="">Username</option><option>user1</option><option>user2</option><option>user3</option><option>user4</option></select>&nbsp;<select id="geo" multiple=""><option selected="true" disabled="">Geo</option><option>chennai</option><option>covai</option><option>hydrabad</option><option>cochin</option><option>mumbai</option></select>&nbsp;<select id="week" multiple=""><option selected="true" disabled="">Weeks</option><option>week1</option><option>week2</option><option>week3</option><option>week4</option></select>&nbsp;<select id="team" multiple=""><option selected="true" disabled="">Teams</option><option>Java</option><option>Lamp</option><option>Oracle</option><option>Sales</option></select>&nbsp;<button class="go">GO</button>&nbsp;</div>