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

Posted 2023-02-24

【中文标题】根据多个下拉过滤获取数据值

【英文标题】：Fetching data values according to multiple dropdown filtering

【发布时间】：2021-12-21 00:12:13

【问题描述】：

目前，我的视图类中有一个表，它使用 Codeigniter 中的 MVC 框架填充了来自后端的数据。现在我在每一列上方都有一个下拉列表，它正在从我的数据库中填写相同的记录。所以我有一个过滤器，只要用户单击下拉列表中的项目，就会过滤我的记录。

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

到目前为止，我的视图类中有这个：

<table>
 <tr>
  <th >Source</th>
 </tr>
 <tr>
  <td ><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 ><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);
        )
    )

控制器类：

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);
    

模型类：

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。所以假设我按源过滤表，然后在该源中我想按contact_type过滤剩余数据，我不能这样做，因为这样做会重置我拥有的第一个过滤器并根据我点击的新选择项过滤所有数据.

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

$('#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()

但这仍然没有成功。

【参考方案1】：

首先，在 jquery 中修复你的 url：

'<?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); 检查您是否收到响应...