将多选值设为 json 格式

Question

我有多选框，我想获取该值并使其低于 json 格式。多选框值是一个数组值。

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

https://jsfiddle.net/dyx8wa9p/1/

Answer 1

您的主要问题是var filter =[]; . 您正在将过滤器设置为 ARRAY。 您希望它是具有特定键名的 OBJECT。

 $(".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>