Filtering data values according to multiple dropdowns

[KSI]

Currently I have a table in my view class that is populated with data from the backend using MVC framework in codeigniter. Now I have a dropdown above each column that is filling in the same records from my database. So I want to be able to filter my records as soon as the person clicks the item in the dropdown list.

To achieve this I'm using a Jquery to get the selected item and sending that value to my controller. Code:

So far I have this in my view class:

<table>
 <tr>
  <th width="10%">Source</th>
 </tr>
 <tr>
  <td width="5%"><select id="your_id_name">
                  <option value="">All </option>
                  <?php if($sources) foreach($sources as $source): ?>
                  <option value="<?php echo $source['title'] ?>"><?php echo $source['title'] ?></option>
                  <?php endforeach;?>
                </select></td>
                <td width="10%"><select id="contact_type">
                  <option value="">All </option>
                  <?php if($types) foreach($types as $type): ?>
                  <option value="<?php echo $type['id'] ?>"><?php echo $type['title'] ?></option>
                  <?php endforeach;?>
                </select></td>
 </tr>
<tbody>
          <?php
              if(isset($records) && count($records) > 0)
                {
                  foreach($records as $row ){                            
                ?>
            <tr>            
              <td><?= $row->source ?></td>
              <td><?= $row->title ?></td>
            </tr>
            <?php }  }  ?>
          </tbody>

<script type="application/javascript">
  $('#your_id_name').on('change', function() {
    console.log($('#your_id_name').val());
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
          selected: $('#your_id_name').val()
        }, function(res) {
            var values = JSON.parse(res); // then do something
            var status = values.status;
            var records = values.records;
             var html = ""
             records.forEach(function(row){
               html += `<tr><td>${row.source}</td>
              <td>${row.title }</td></tr>
              `; 
              console.log(tbody_tag)
             })
             var tbody_tag = $('tbody#table_body'); 
             tbody_tag.html(html);
        })
    })

    $('#contact_type').on('change', function() {
    console.log($('#contact_type').val());
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
          selected_contact: $('#contact_type').val()
        }, function(res) {
            var values = JSON.parse(res); // then do something
            var status = values.status;
            var records = values.records;
             var html = ""
             records.forEach(function(row){
               html += `<tr><td>${row.source}</td>
              <td>${row.title}</td></tr>
              `; 
             })
             var tbody_tag = $('tbody#table_body'); 
             tbody_tag.html(html);
        })
    })

controller class:

public function ajax_lists(){
         $data = array(); // store data in here, store all data you need in data 
         $selected_input = $this->input->get('selected');
         $selected_input2 = $this->input->get('selected_contact');
        $data['records'] =$this->contacts_model->get_records($selected_input,$selected_input2);
        echo json_encode($data);
    }

Model Class:

function get_records($selected_input = null,$selected_input2 =null){
        $this->db->select("*");
        $this->db->from("crm_contacts as con");
        if($selected_input){
            $this->db->where("con.added_by",$selected_input);
        }
        if($selected_input2){
            $this->db->where("con.contact_type",$selected_input2);
        }
        $query = $this->db->get();
        return $query->result();
    }

Here as of now I can filter all my records 1 at a time. So suppose I filter the table by source and then inside that source I want to filter the leftover data by contact_type, I cannot do it since doing so resets the 1st filter I had and filters all the data according to the new select item I have clicked.

[requinix]

Use one single onchange handler for all the dropdowns: put the filter inside a <thead> so you can use a simple selector to find them all (without any IDs). Then make that single handler retrieve and submit the values for all the dropdowns.

And for crying out loud, learn how to name things. "your_id_name"? "selected" versus "selected_contact"? "selected_input" and "selected_input2"? Give those things actually meaningful values. It'll make your life easier.