将多选值设置为 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(){

  const filter = {

    username: $("#username").val(),

    geo: $("#geo").val(),

    week: $("#week").val(),

    team: $("#team").val(),

  };

  const otherFilterFormat = Object.keys(filter).reduce((a, c) => {

    a[c] = filter[c].reduce((x, y) => {

      x[y] = y;

      return x;

    }, {});

    return a;

  }, {});

  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;">

 <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>