根据多重下拉筛选获取数据值

Question

目前，我的视图类中有一个表，该表使用Codeigner中的MVC框架从后端填充数据。现在，我在每个列上方都有一个下拉列表，用于填充数据库中的相同记录。因此，我有一个过滤器，一旦用户单击下拉列表中的项目，就会过滤我的记录。

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

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

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

控制器类别：

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函数中输入两个相同的vals，如下所示：

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

首先，在jquery中修复您的url from：

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

至：

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

html在这里不起作用。使用附加功能

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

不需要在控制器中制作$data的键["记录"]使用这个：

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

并通过console.log(res(进行检查要么你得到了回应，要么没有。。。