[英]jQuery filter json based on multiple select boxes
我正在尝试使用多个选择框中的用户选择的值从json数据中进行过滤。 选择框是
var data = [ {'BranchID': 1, 'City': "CA", 'State': "Culver City", 'VenueName': "Test Venue1", 'Address': "Address1"}, {'BranchID': 2, 'City': "MD", 'State': "San Antonio", 'VenueName': "Test Venue2", 'Address': "Address2"}, {'BranchID': 1, 'City': "CA", 'State': "Culver City", 'VenueName': "Test Venue3", 'Address': "Address3"}, {'BranchID': 3, 'City': "TX", 'State': "St. Louis", 'VenueName': "Test Venue4", 'Address': "Address4"} ]; //var values = JSON.parse(jQuery('#Data').text()); var values = data; $("select").on("change", function () { var showAll = true, show = [], joined; $.each(values, function (id, index) { var $el = $('#filter' + id), val = $el.val(); if (val != null) { showAll = false; $.each(val, function (i, v) { show.push( v ); }); } }); console.log(showAll); console.log(show); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <select id="filter1"> <option selected="" disabled="">State</option> <option value="CA">CA</option> <option value="MD">MD</option> <option value="WA">WA</option> <option value="TX">TX</option> </select> <select class="filter2"> <option selected="" disabled="" value="">City</option> <option value="Culver City">Culver City</option> <option value="Aberdeen Proving Ground">Aberdeen Proving Ground</option> <option value="Kent">Kent</option> <option value="San Antonio">San Antonio</option> <option value="St. Louis">St. Louis</option> </select> <select id="filter3"> <option selected="" disabled="">Venue Name</option> <option value="Test Venue1">Test Venue1</option> <option value="Test Venue2">Test Venue2</option> <option value="Test Venue3">Test Venue3</option> <option value="Test Venue4">Test Venue4</option> <option value="Test Venue5">Test Venue5</option> </select>
如何在不编写大量if语句的情况下过滤NULL选择值和实际选择的值。
在此处使用纯Javascript。 .onchange()
和.filter()
就足够了。 但是您将无法避免最少数量的if语句来正确过滤。
HTML
<select id="filter1" onchange="changeListener(this)">...</select>
<select id="filter2" onchange="changeListener(this)">...</select>
<select id="filter3" onchange="changeListener(this)">...</select>
JavaScript的
function changeListener() {
var filter1 = document.getElementById("filter1").value;
var filter2 = document.getElementById("filter2").value;
var filter3 = document.getElementById("filter3").value;
var result = [];
if(filter1 != null) {
result = data.filter(el => el.City === filter1);
}
if(filter2 != null) {
filterMatches(filter2, 'State');
}
if(filter3 != null) {
filterMatches(filter3, 'VenueName');
}
console.log('result: ', result);
}
function filterMatches(criteria, field) {
let tempResult = [];
if(result.length > 0){
result.forEach(el => {
if(el.[field] === criteria){
tempResult.push(el);
}
});
result = tempResult;
} else {
result = data.filter(el => el.[field] === criteria);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.