title: How to filter data-tables using two or more dependent drop-down list?
body: <p>I'm trying to apply filters to my data-table with drop-down list box which are dependent. But when i'm trying to select a value from drop-down, data-table takes value from only one drop-down.</p>
  
  <p><strong>Here is my code:</strong></p>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      var dataTable = $('#exampleProp').DataTable({
        "processing": true,
        "serverSide": true,
        "dom": 'lfrtip',
        "ajax": {
          "url": "&lt;?= base_url('Property/fetchProp'); ?&gt;",
          "dataType": "json",
          "type": "POST"
        },
        "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
        // "ordering": false,
      });
  
      $('#areaId').on('change', function(){
        if (this.value == 1) {
          dataTable.search("Midlands &amp; East of England").draw();
        } else {
          dataTable.search("North East, Yorkshire &amp; Humberside").draw();
        }
      });
      $('#cluster_id').on('change', function(){
         dataTable.search(this.value).draw();   
      });
      $('#prop_type').on('change', function(){
         dataTable.search(this.value).draw();   
      });
      $('#prop_status').on('change', function(){
         dataTable.search(this.value).draw();   
      });
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>In this, Cluster is dependent on Area, but if I select Area, it filters using area only, and not by cluster.</p>
  
  <p><strong>Here is the code to pick a cluster list from database:</strong></p>
  
  <pre><code>$('#areaId').change(function(){
           var form_date =
           $.ajax({
            url: "&lt;?= base_url('Property/clusterlistAddPropertyUse'); ?&gt;",
            data: {areaId:$(this).val()},
            method:'POST',
            dataType: 'html',
            success:function(data){
                // $('#cluster_id option:selected').each(function(){
                // $(this).prop('selected', false);
                // });
                $('#cluster_id').html(data); 
                $('.propcluster').multiselect('rebuild');                 
               }
            }); 
      });
  </code></pre>
  
  <p><strong>Here is my view code:</strong></p>
  
  <pre><code>&lt;?php if($this-&gt;session-&gt;flashdata('success_msg')){ ?&gt;
    &lt;div class="alert alert-success"&gt;
      &lt;?php echo $this-&gt;session-&gt;flashdata('success_msg'); ?&gt;
    &lt;/div&gt; 
  &lt;?php } ?&gt;
  
  &lt;?php if($this-&gt;session-&gt;flashdata('error_msg')){ ?&gt;
    &lt;div class="alert alert-danger"&gt;
      &lt;?php echo $this-&gt;session-&gt;flashdata('error_msg'); ?&gt;
    &lt;/div&gt; 
  &lt;?php } ?&gt;
  
  &lt;div class="panel panel-default" id="refresh"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;b&gt;Property List&lt;/b&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;div class="col-md-3"&gt;
        &lt;label&gt;Area:&lt;/label&gt;
        &lt;select class="form-control select2" name="area_id" id="areaId"&gt;
          &lt;option&gt;All&lt;/option&gt;
          &lt;?php foreach ($areas as $area) { ?&gt;
            &lt;option value="&lt;?= $area-&gt;area_id; ?&gt;"&gt;&lt;?php echo $area-&gt;area_name; ?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;label&gt;Cluster:&lt;/label&gt;
        &lt;select class="form-control select2" name="cluster_id[]" id="cluster_id"&gt;
        &lt;option&gt;All&lt;/option&gt;
          &lt;?php foreach ($clusters as $cluster){ ?&gt;
            &lt;option&gt;&lt;?php echo $cluster-&gt;cluster_name; ?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;label&gt;Type:&lt;/label&gt;
        &lt;select class="form-control" name="property_type" id="prop_type"&gt;
          &lt;option&gt;All&lt;/option&gt;
          &lt;?php if ($property_type) { foreach ($property_type as $type) {?&gt;
            &lt;option&gt;&lt;?= $type-&gt;property_type_name;?&gt;&lt;/option&gt;
          &lt;?php } } ?&gt;
        &lt;/select&gt; 
      &lt;/div&gt; 
      &lt;div class="col-md-3"&gt;
        &lt;label&gt;Stage:&lt;/label&gt;
        &lt;select class="form-control" name="property_status" id="prop_status"&gt;
          &lt;option&gt;All&lt;/option&gt;   
          &lt;?php foreach ($property_stage as $stage) { ?&gt;  
            &lt;option&gt;&lt;?= $stage-&gt;stage_name; ?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
        &lt;/select&gt;
      &lt;/div&gt; 
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;table id="exampleProp" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Code&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Type&lt;/th&gt;
            &lt;th&gt;ASYS&lt;/th&gt;
            &lt;th&gt;Address1&lt;/th&gt;
            &lt;!-- &lt;th&gt;Area&lt;/th&gt; --&gt;
            &lt;th&gt;City&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
            &lt;th&gt;Landlord&lt;/th&gt;
            &lt;th&gt;Rooms&lt;/th&gt;
            &lt;th&gt;Edit&lt;/th&gt;
            &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot&gt;
          &lt;tr&gt;
            &lt;th&gt;Code&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Type&lt;/th&gt;
            &lt;th&gt;ASYS No&lt;/th&gt;
            &lt;th&gt;Address1&lt;/th&gt;
            &lt;!-- &lt;th&gt;Area&lt;/th&gt; --&gt;
            &lt;th&gt;City&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
            &lt;th&gt;Landlord&lt;/th&gt;
            &lt;th&gt;Rooms&lt;/th&gt;
            &lt;th&gt;Edit&lt;/th&gt;
            &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="modal fade" id="myModal"&gt;
    &lt;?php include('property_model_view.php'); ?&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to filter data with both area and cluter and then type and stage also.</p>
  
  <p><strong><em>Edit:</em></strong>
  **</p>
  
  <blockquote>
    <p>For more details, I'm adding Controller and model code here:</p>
  </blockquote>
  
  <p>**</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>public function prop_query()
  {
      # code...
      $this-&gt;db-&gt;select('property_id, property_code, property_added_date, property_updated_date, property_type, tbl_property_type.property_type_name as type, property_ASYS_no, property_address_1, property_area, tbl_area.area_name as area, property_cluster, tbl_cluster.cluster_name as cluster, property_status, tbl_property_stage.stage_name as stage, property_landlord_id, concat(tbl_landlord.landlord_first_name, tbl_landlord.landlord_middle_name, tbl_landlord.landlord_last_name) as landlord, property_postcode, count(tbl_rooms.room_property_id) as rooms,');
      $this-&gt;db-&gt;from($this-&gt;property);
  
      $this-&gt;db-&gt;join('tbl_property_type', 'tbl_property.property_type = tbl_property_type.property_type_id', 'left');
      $this-&gt;db-&gt;join('tbl_area', 'tbl_property.property_area = tbl_area.area_id', 'left');
      $this-&gt;db-&gt;join('tbl_cluster', 'tbl_property.property_cluster = tbl_cluster.cluster_id', 'left');
      $this-&gt;db-&gt;join('tbl_property_stage', 'tbl_property.property_status = tbl_property_stage.stage_id', 'left');
      $this-&gt;db-&gt;join('tbl_landlord', 'tbl_property.property_landlord_id = tbl_landlord.landlord_id', 'left');
      $this-&gt;db-&gt;join('tbl_rooms', 'tbl_property.property_id = tbl_rooms.room_property_id', 'left');
  
      // $whereArray = array('tbl_property.property_type' =&gt; $propertyType, 'tbl_property.property_area' =&gt; $area, 'tbl_property.property_status' =&gt; $stageId, 'tbl_property.property_cluster' =&gt; '$clusterString');
  
      // $this-&gt;db-&gt;where('tbl_property.property_type', $propertyType);
      // $this-&gt;db-&gt;where('tbl_property.property_area', $area);
      // $this-&gt;db-&gt;where('tbl_property.property_status', $stageId);
      // $this-&gt;db-&gt;where('tbl_property.property_cluster', $clusterString);
  
      $this-&gt;db-&gt;group_by('tbl_property.property_id');
      // $this-&gt;db-&gt;order_by("tbl_property.property_updated_date", "DESC");
  
      if (isset($_POST["search"]["value"])) {
          # code...
          $this-&gt;db-&gt;like("property_id", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("property_code", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("property_added_date", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("tbl_property_type.property_type_name", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("property_ASYS_no", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("property_address_1", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("tbl_area.area_name", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("tbl_cluster.cluster_name", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("tbl_property_stage.stage_name", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("concat(tbl_landlord.landlord_first_name, tbl_landlord.landlord_middle_name, tbl_landlord.landlord_last_name)", $_POST["search"]["value"]);
          $this-&gt;db-&gt;or_like("property_postcode", $_POST["search"]["value"]);
      }
  
      if (isset($_POST["order"])) {
          # code...
          // $this-&gt;db-&gt;order_by("tbl_property.property_updated_date", "DESC");
          $this-&gt;db-&gt;order_by($this-&gt;order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
      } else {
          # code...
          $this-&gt;db-&gt;order_by("tbl_property.property_updated_date", "DESC");
          // $this-&gt;db-&gt;order_by($this-&gt;order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
      }
  }
  
  public function prop_datatables()
  {
      # code...
      $this-&gt;prop_query();
  
      if ($_POST["length"] != -1) {
          # code...
          $this-&gt;db-&gt;limit($_POST["length"], $_POST["start"]);
      }
  
      $query = $this-&gt;db-&gt;get();
  
      return $query-&gt;result();
  }
  
  public function prop_filtered_data()
  {
      # code...
      $this-&gt;prop_query();
      $query = $this-&gt;db-&gt;get();
  
      return $query-&gt;num_rows();
  }
  
  public function prop_all_data()
  {
      # code...
      $this-&gt;db-&gt;select("*");
      $this-&gt;db-&gt;from($this-&gt;property);
  
      return $this-&gt;db-&gt;count_all_results();
  }
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>public function fetchProp()
  {
      # code...
      $user = $this-&gt;ion_auth-&gt;user()-&gt;row();
      $data['username'] = $user-&gt;username;
  
      $data['user_id'] = $user-&gt;id;
      $user_id = $user-&gt;id;
      $data['groupId'] = $this-&gt;l-&gt;groupId($user_id);
      $data['group'] = $data['groupId']['0']-&gt;group_id;
  
      $fetch_prop = $this-&gt;pm-&gt;prop_datatables();
  
      $data = array();
  
      foreach ($fetch_prop as $row) {
          # code...
          $sub_array = array();
          $sub_array[] = $row-&gt;property_code;
          $sub_array[] = $row-&gt;property_added_date;
          $sub_array[] = $row-&gt;type;
          $sub_array[] = $row-&gt;property_ASYS_no;
          $sub_array[] = $row-&gt;property_address_1;
          // $sub_array[] = $row-&gt;area;
          $sub_array[] = $row-&gt;cluster;
          $sub_array[] = $row-&gt;stage;
          $sub_array[] = $row-&gt;landlord;
          $sub_array[] = $row-&gt;rooms;
  
              }
          }
  
  
          // $sub_array[] = '&lt;a style="text-decoration: none;" href="'.base_url('Property/propertyDetails/'.$row-&gt;property_id).'" class="btn-warning btn-xs"&gt;View&lt;/a&gt;&amp;nbsp;
          // &lt;a style="text-decoration: none;" href="'.base_url('Property/viewRoom/'.$row-&gt;property_id).'" class="btn-success btn-xs"&gt;Rooms&lt;/a&gt;';
  
  
          $data[] = $sub_array;
      }
  
      $output = array(
          "draw" =&gt; intval($_POST["draw"]),
          "recordsTotal" =&gt; $this-&gt;pm-&gt;prop_all_data(),
          "recordsFiltered" =&gt; $this-&gt;pm-&gt;prop_filtered_data(),
          "data" =&gt; $data
      );
  
      echo json_encode($output);
  }
  </code></pre>
  
  <p>I'm gone through this link <a href="https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html" rel="noreferrer">Data-Tables</a>, But it gives result from columns from table only, I'm not showing area column in the table.</p>
  
  <p><strong>Edit_2:</strong></p>
  
  <p>While googled, I got this link, <a href="https://www.datatables.net/release-datatables/examples/api/regex.html" rel="noreferrer">Search API (regular expressions)</a>, <a href="https://stackoverflow.com/questions/27479868/data-table-specific-column-filter-with-multi-select-drop-down">Data table specific column filter with multi select drop down
  </a>, <a href="https://datatables.net/examples/api/multi_filter_select.html" rel="noreferrer">Individual column searching (select inputs)
  </a>, I'm trying to achieve result like this, But with Drop-down box.</p>
  
  <p>Any kind of help is welcome. Thanks in advance.</p>