[英]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.