title: Fetching data through ajax and then apply filter using select
body: <p>I have 3 different select menu: 1.Category 2.State 3.City</p>
  
  <p>I am using ajax to fetch the data on "#searchresult" by using jquery on change method that send data on PHP.</p>
  
  <p>Fetching is going properly but only for one "select" option. </p>
  
  <p>What I want is when user change another "select" option, it will update the current "#searchresult" fetched data. 
  Like: Suppose, on changing "category" to "car", it fetch all the data of "cars" on "#searchresult" and now on "state" change to "new york", it update the "#searchresult" that are in new york.</p>
  
  <p>I tried many different approches like using multiple if statements to find whether the select is choosen or not, but reached no where.</p>
  
  <p>Thanks in advance.</p>
  
  <p>My code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#category").change(function() {
  
      var data = $("#category option:selected").val();
      var category = $("#category option:selected").text();
  
      var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('id');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
  
      $.ajax({
        type: "POST",
        url: "category",
        data: {
          data: data
        },
        dataType: 'json',
        cache: false,
        success: function(response) {
          $("#searchresult").html("");
  
          for (var i = 0; i &lt;= 5; i++) {
            $("#searchresult").append('&lt;div class="col-12 col-sm-10 col-md-4 col-lg-3 col-xl-2 merchant" style="background-image: url(https://im.proptiger.com/1/1543935/6/green-villa-elevation-7990949.jpeg?width=380&amp;height=285);"&gt;    &lt;div class="filter"&gt;&lt;/div&gt;     &lt;span class="category"&gt;' + category + '&lt;/span&gt;     &lt;div class="col align-self-end"&gt;     &lt;p&gt;' + response.contractor[i].first_name + '&lt;/p&gt;     &lt;span&gt;' + response.contractor[i].city_name + ',' + response.contractor[i].state_name + '&lt;/span&gt;     &lt;/div&gt;    &lt;div class="slideup"&gt;     &lt;p&gt;More info?&lt;/p&gt;     &lt;a href="' + response.contractor[i].url + '" class="btn"&gt;Profile&lt;/a&gt;    &lt;/div&gt;   &lt;/div&gt;');
          }
        }
      });
  
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;select name="category" id="category" class="chosen"&gt;
  &lt;option value="0" default&gt;category&lt;/option&gt;
  &lt;option value="1"&gt;Car&lt;/option&gt;
  &lt;option value="2"&gt;Van&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="state" id="state" class="chosen"&gt;
  &lt;option value="0" default&gt;state&lt;/option&gt;
  &lt;option value="1"&gt;Any&lt;/option&gt;
  &lt;option value="2"&gt;other&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="city" id="city" class="chosen"&gt;
  &lt;option value="0" default&gt;city&lt;/option&gt;
  &lt;option value="1"&gt;New york&lt;/option&gt;
  &lt;option value="2"&gt;Chicago&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="searchresult"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and PHP is sending data in the form of json.</p>
  
  <p>Thanks</p>