javascript - 当所有下拉列表相互链接时，如何过滤下拉列表中的值？

Question

我有三个下拉菜单。对于国家、地区/州和城市，如下:

以下是标记:

            <div class="form-group"> 
                <label for="country">Country</label>
                <select class="form-control" id="country">

                </select>               
            </div>
            <div class="form-group"> 
                <label for="region">Region</label>
                <select class="form-control" id="region">

                </select>
            </div>
            <div class="form-group"> 
                <label for="city">City</label>
                <select class="form-control" id="city">

                </select>
            </div>

在三个下拉列表中的任何一个中选择一个值时，需要根据任意时间点在所有三个下拉列表中选择的值来过滤其他两个下拉列表中的可用选项。 请注意:我使用的是 jQuery。

到目前为止，我已经根据唯一一个更改的下拉值进行了过滤，而不是考虑所有，并且当用户转到“国家”-->“地区”-->“城市”时，它也会过滤值。如果用户从下到上说城市 --> 地区 --> 国家/地区，如何考虑其他下拉列表中的值以及过滤此处的值？

$("#country").on('change', function(){

    var selectedCntry = $("#country option:selected").val();

    console.log(selectedCntry);
    var ddRegions = [];
    var ddCities = [];

    $.each(ddVals, function(i,val){
        if( val.country == selectedCntry){
            ddRegions.push(val.region);
            ddCities.push(val.city);
        }
    });

    if(ddRegions.length > 0){
            var regions = "<option value='none'>    Select Region </option>";
            $.each(ddRegions, function(i,val){

                regions += "<option value="+"'"+val+"'"+">"+val+"</option>";

            });

            $("#region").html(regions);
    }

    if(ddCities.length > 0){
         var cities = "<option value='none'>    Select City </option>";
         $.each(ddCities, function(i,val){
             cities += "<option value="+"'"+val+"'"+">"+val+"</option>";

         });
        $("#city").html(cities);
    }


});

$("#region").on("change",function(){
    var selectedReg = $("#region option:selected").val();
    console.log(selectedReg);

    var ddRegionBasedCity = [];

    $.each(ddVals, function(i,val){
        if( val.region == selectedReg){

            ddRegionBasedCity.push(val.city);
        }
    });

    if(ddRegionBasedCity.length > 0){
         var cities = "<option value='none'>    Select City </option>";
         $.each(ddRegionBasedCity, function(i,val){
             cities += "<option value="+"'"+val+"'"+">"+val+"</option>";

         });
        $("#city").html(cities);
    }


});

这里的“ddVals”是一个变量，它有一个带有 json 对象的数组，我从中过滤值作为下拉列表中的选项。该数组如下所示:

[{
    "city": "Houston",
    "country": "United States",
    "region": "Texas"
}, {
    "city": "Oegstgeest",
    "country": "Netherlands ",
    "region": "South Holland"
}, {
    "city": "Houston",
    "country": "United States",
    "region": "Texas"
}, {
    "city": "Wellington",
    "country": "New Zealand ",
    "region": "-"
}, {
    "city": "London",
    "country": "United Kingdom",
    "region": "Great Britain"
}, {
    "city": "Federal Way",
    "country": "United States",
    "region": "Washington"
}, {
    "city": "Armonk",
    "country": "United States",
    "region": "New York"
}, {
    "city": "San Ramon",
    "country": "United States",
    "region": "California"
}, {
    "city": "New York City",
    "country": "United States",
    "region": "New York"
}, {
    "city": "Roseland",
    "country": "United States",
    "region": "New Jersey"
}]

Answer 1

我会去九月。过滤功能:

// data is your location data (used in the filter method)
// might be better to remove this from global namespace.
var data = [{
  "city": "Houston",
  "country": "United States",
  "region": "Texas"
}];


/* @param filterBy the key for your ojects (city, country)
 * @param filterVal the value to check for
 */
function filterData( filterBy, filterVal) {
  return data.map(function(row) {return row}).filter(function(value) {
      if(value[filterBy] == filterVal) {
        return true;
      }
      return false;
  });
}

您可以使用此函数根据每个选择来获取所有三个字段的过滤数组。以下jquery代码未经测试，更多伪代码演示如何使用过滤器:

$(".form-control select").on('change', function() {
    // using the field id as object-key.
    // second, call filterdata with the key and the current val.
    var identifier = this.id,
        fData = filterData( identifier, $(this).val());

    // now all you need to do is to loop over all your fields
    // and update all select fields by using the filtered Data..
    $(".form-control select").each(function() {
        var cid = this.id, c = '', 
        emptyText = $(this).find("option[value='']").text();
        // get the 'Please Select' for each field
        c += '<option value="">' + emptyText + '</option>';
        // loop over all available data elements of the filtered data
        // if the object-key is the same as current id, 
        // add a selection...
        for( var i=0, l = fData.length; i < l; i++) {
          foreach( prop in fData[i]) {
            if (prop == cid) {
              c +="<option value="+"'"+fData[i][cid]+"'"+">"+
                fData[i][cid]+"</option>";
            }
          } 
        }
        $(this).html(c);
    });
});

正如我所说，jQuery 代码未经测试，但您可以通过直接调用来轻松验证过滤器方法，例如:

console.log(filterData( 'city', 'Roseland'));
console.log(filterData( 'region', 'New Jersey'));
console.log(filterData( 'country', 'United States'));

除此之外，根据下面的注释，这里还有另一种过滤方法，可以一次处理所有字段值。您需要做的就是收集所有字段(及其键)的当前值，将其存储在一个对象中，过滤器方法将返回匹配的数据。 conditionAll 是一个 bool 标志，用于决定所有过滤器必须匹配 (true) 还是仅匹配一个 (false)。

function multiFilterData( filters, conditionAll ) {
  return data.map(function(row) {return row}).filter(function(value) {
    for(var key in filters) {
      if( conditionAll && value[key] != filters[key]) {
        return false;
      } else if( !conditionAll && value[key] == filters[key]) {
        return true;
      }
    }
    return (conditionAll) ? true : false;
  });
}


// all conditions must fit (this won't work in many cases)
console.log(multiFilterData( {city:'Roseland',region:'-', country:'-'}, true ));
// one condition must fit
console.log(multiFilterData( {city:'Roseland',region:'-', country:'-'}, false ));