Question

我正在尝试使用用户从多个选择框中选择的值从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选择值和实际选择的值。

Answer 1

在此处使用纯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);
        }
    }
}

jQuery基于多个选择框的json过滤器

1 个答案: