根据实时下拉列表过滤数据值

Question

目前我有一个 table 在我看来 class，它使用 codeigniter 中的 MVC 框架从后端填充数据。现在，我在每一列上方都有一个下拉列表，用于填充我数据库中的相同记录。所以我希望能够在用户单击下拉列表中的项目时立即过滤我的记录。

我知道如何在单击提交按钮时过滤记录，但我希望在用户单击下拉项时立即进行此过滤，为此我假设我需要一个我不熟悉的 AJAX 电话。

到目前为止，我认为这是 class:

<table>
 <tr>
  <th width="10%">Source</th>
 </tr>
 <tr>
  <td width="5%"><select>
                  <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>
 </tr>
<tbody>
          <?php
              if(isset($records) && count($records) > 0)
                {
                  foreach($records as $row ){                            
                ?>
            <tr>            
              <td><?= $row->source ?></td>
            </tr>
            <?php }  }  ?>
          </tbody>

此处默认 select 显示具有空值的 Any 以显示所有记录，并且后端数据在其下方具有单独的值。现在我想在这里进行实时过滤。此外，这里我只包含了 1 个下拉列表，但是有多个下拉列表，因此它应该根据提供的所有下拉列表值进行过滤。

Answer 1

只需创建一个ajax函数来接收选项更改时的请求：

$route['ajax_dropdown'] = 'your_controller/your_function'; // change ajax_dropdown to whatever you want

然后在你的控制器中：

function your_function()
{
    $input_value = $this->input->get('your_input_name'); // get the input value of jQuery's get request
    $data = array(); // store data in here
    // do something like: $data['status'] = $this->your_model->get_status();    
    echo json_encode($data); // json_encode to make your data object become a string to send    }

最后，在您看来，您可以发送 ajax 请求来获取数据。我更喜欢使用 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>
    </tr>
    <tbody>
        <?php
        if (isset($records) && count($records) > 0) {
            foreach ($records as $row) {
        ?>
                <tr>
                    <td><?= $row->source ?></td>
                </tr>
        <?php }
        }  ?>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $('#your_id_name').on('change', function() {
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
            your_input_name: 'your_value' // input value of get request 
        }, function(res) {
            var values = JSON.parse(res); // then do something
        })
    })
</script>

根据实时下拉列表过滤数据值

Filtering data values according to live dropdown

php

jquery

ajax

codeigniter