根据多重下拉过滤获取数据值

Question

目前，我认为 table class 使用 Codeigniter 中的 MVC 框架从后端填充数据。现在，我在每一列上方都有一个下拉列表，用于填充我数据库中的相同记录。所以我有一个过滤器，只要有人点击下拉列表中的项目，我的记录就会被过滤掉。

为了实现这一点，我使用 Jquery 来获取 selected 项目并将该值发送到我的控制器。代码：

到目前为止，我认为这是 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);
        })
    })

控制器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);
    }

型号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();
    }

到目前为止，我可以一次过滤我所有的记录 1。因此，假设我按源过滤 table，然后在该源内我想按 contact_type 过滤剩余数据，我不能这样做，因为这样做会重置我拥有的第一个过滤器并根据过滤所有数据转到我点击的新 select 项。

基本上，我希望能够过滤已经过滤的数据并根据我的需要进行更改。我试过在我的一个 onchange 函数中输入 2 个相同的值，如下所示：

$('#your_id_name').on('change', function() {
    console.log($('#your_id_name').val());
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
          selected: $('#your_id_name').val(),
          selected_contact: $('#contact_type').val()

但是还是不行。

Answer 1

首先，将您的 url 修复为 jquery 来自：

'<?php echo base_url('ajax_dropdown'); ?>'

至：

'<?php echo base_url("ajax_dropdown"); ?>'

tbody_tag.html(html);

html 在这里不起作用。使用追加函数

 $('tbody').append(html);

不需要在控制器中为 $data 创建键 ["records"] 使用这个：

$data =$this->contacts_model->get_records($selected_input,$selected_input2);

并通过 console.log(res); 检查您是否收到回复...

根据多重下拉过滤获取数据值

Fetching data values according to multiple dropdown filtering

php

jquery

ajax

codeigniter