C＃Image / Bitmap Superclass / Subclass Casting anomaly(C# Image/Bitmap Superclass/Subclass Casting anomaly)

 我会去找一个sep。 过滤功能： 
 
// 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'));
 
 除此之外，由于下面的注释，这里是另一种可以一次处理所有字段值的过滤方法。 您需要做的就是收集所有字段（及其键）的当前值，将其存储在对象中，filter方法将返回匹配的数据。 conditionAll是一个布尔标志，用于决定所有过滤器是否必须匹配（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 ));

I finally used lodash to filter the json data. It made my task very easy and straight forward. I just created a function as follows and called it on change of every dropdown. The function below is taking the selected value from each dropdown and is passing it to _filter method provide by lodash. It now gives back the filter, limited json data which matches the passed value. Later on i am iterating on that to generate the markup and injecting it to the document. At the same time, i am keeping the selectedValue unchanged on every dropdown by setting it back.
 
function filterDropDown(ddVals){

    var selCity = $('#city').find(":selected").val();
    var selRegion = $('#region').find(":selected").val();
    var selCountry = $('#country').find(":selected").val();


    var selData = {};

    if( selCity !== "none"){
        selData['city'] = selCity;
    } 
    if(selRegion !== "none"){
        selData['region'] = selRegion;
    }
    if(selCountry !== "none"){
        selData['country'] = selCountry;
    }




    var filteredObj = _.filter(ddVals, selData);


    var ddCountries = [];
    var ddRegions = [];
    var ddCities = [];


    $.each(filteredObj, function(i,val){

        if(ddCountries.indexOf(val.country) == -1){
            ddCountries.push(val.country);
        }

        if(ddRegions.indexOf(val.region) == -1){
            ddRegions.push(val.region);
        }

        if(ddCities.indexOf(val.city) == -1){
            ddCities.push(val.city);
        }


    });

    if(ddCountries.length > 0){
        var countries = "<option value='none'>    Select Country </option>";
        $.each(ddCountries, function(i,val){
                countries += "<option value="+"'"+val+"'"+">"+val+"</option>";
        });
        $("#country").html(countries);
        $("#country option[value='"+selCountry+"']").prop('selected', true);
    }
    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);
        $("#region option[value='"+selRegion+"']").prop('selected', true);
     }
     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);
        $("#city option[value='"+selCity+"']").prop('selected', true);
     }


}