Bharadwajcvrg 0 Newbie Poster

Hi All,

I am trying to filter the State, City using WATABLE. In my data city coloumn has identical state values for example Multiple states has same city. In that case when I filtering the city complete watable is filtered upon city instead of state.

Like

State: Texas City Drop down has a,b,e

Values in WATABLE after state filter

State City

Texas a
Texas b
Texas e

When I select e from the city drop down the table values are reset and it is returning as

State City

Arizona e
Alaska e
Texas e

Please help me out to fix

$('#State').on('change',function(e)
     {

        var data = getDataforTable(ajaxsource,"");
        var obj=data.rows;
        var getid=$(this).val();
        console.log(getid);
        var get=$.map(obj, function(n)
        {

            if((n.State.indexOf(getid) > -1))
            {
                return n;
            }


        });

        var dat = getDataforTable(get,"update");
        waTable.setData(dat);

        $(".watable tbody tr:even").css("background-color", "#f2f2f2");
 $(".watable tbody tr:odd").css("background-color", "#fff"); 
     });


$('#City').on('change',function(e)
     {
        var data = getDataforTable(ajaxsource,"");
        var obj=data.rows;
        var getid=$(this).val();        
        var get=$.map(obj, function(n)
        {

            if((n.City.indexOf(getid) > -1))
            {
                return n;               
            }


        });

        var dat = getDataforTable(get,"update");
        waTable.setData(dat);
        $(".watable tbody tr:even").css("background-color", "#f2f2f2");
 $(".watable tbody tr:odd").css("background-color", "#fff");


     });

$("#State").change(function()
        {
        $("#City").children('option:not(:first)').remove();
            var getstate=$(this).val();         
             var newCity=new Array;
            $.each(GetCity, function (index, value)
            {
            if(value.State==getstate)
                    {
                    if($.inArray(value.City,newCity) === -1){
                    if(getnumbercomma(value.City) == 0){

                      newCity.push(value.City);
                      }
                    } 
                    }
             });
             newCity.sort();
             for(var j=0;j<newCity.length;j++){           
               var liHtml = "<option value='"+newCity[j]+"'>" + newCity[j] + "</option>";
                      $("#City").append(liHtml);
                      }

        });