根据 ajax 在 Codeigniter 中选择的主选项显示子选项

Question

我希望当我选择 cats 选项时，只显示猫的品种，例如 Siamese 示例。如果我选择dog，我只想得到狗的品种，比如Pitbull等。

你能帮我写代码吗，它告诉我使用jquery，但是我刚刚学习它是怎么做的？

<div class="form-group">
    <div class="row">
        <div class="col-12 col-sm-6">
            <label for="especie">Especie</label>
            <select class="form-control" id="id_especie" name="id_especie" value="data-id-especie=">
                <option value="">Seleccionar especie</option>
                <?php foreach ($especie as $row) {?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
                <?php }?>
            </select>
        </div>
        <div class="col-12 col-sm-6">
            <label for="raza">Raza</label>
            <select class="form-control" id="id_raza" name="id_raza">
                <option value="">Seleccionar raza</option>
                <?php foreach ($raza as $row) {?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
                <?php }?>
            </select>
        </div>
    </div>
</div>

Answer 1

根据您的问题，您希望在带有 ajax / jQuery 的 codeigniter 中使用 动态相关下拉列表。

PHP 视图：

<div class="col-12 col-sm-6">
        <label for="especie">Especie</label>
        <select class="form-control" id="id_especie" name="id_especie" value="data-id-especie=">
            <option value="">Seleccionar especie</option>
            <?php foreach ($especie as $row) {?>
                <option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
            <?php }?>
        </select>
    </div>

<div class="col-12 col-sm-6">
        <label for="raza">Raza</label>
        <select class="form-control" id="id_raza" name="id_raza">
         <!-- Data here will be auto populated by ajax -->

            </select>
    </div>

控制器：

public function get_data()
           {
                $id_especie = $this->input->post("id_especie");
     $SUbCatdata = $this->db->get_where('tableName',array('id'=>$id_especie))->result_array();
            $option ="<option selected disabled value=''>Select Name</option>";
              foreach($SUbCatdata as $row)
              {
                 $option.="<option value='".$row['id']."'>".$row['nombre']."</option>";
              }
               echo $option;
           }

jQuery / Ajax：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        $("#id_especie").on("change",function(){
        var id_especie = $(this).val();
     
        $.ajax({
             url : "<?php echo base_url('Controller/get_data') ?>",
             type: "post",
             data: {"id_especie":id_especie},
             success : function(data){
                //alert(data);
        $("#id_raza").html(data);
             }
        });
    });
    
    </script>   
        

注意：有关change()

的更多信息

https://api.jquery.com/change

Answer 2

如果我对您的理解正确，您希望创建一个子下拉列表，该列表依赖于另一个（主）下拉列表的选择。如果是这种情况，这就是您需要做的。

首先，您需要创建一个文件，其中包含将根据提供的内容获取结果的代码。也就是说（在您的示例中），如果主要类别是 "dogs"，它将查询数据库中所有 "species" 的狗，并返回结果。像这样的：

类别控制器

class Category_controller extends CI_Controller{
    // Get Subcategory method
    public function get_subcategory()
    {
        // Check if input ($_GET or $_POST) exists
        if ( $this->input->post_get() )
        {
            $main_cat_id = $this->input->post_get('mainid'); // main category id
            
            // Perform your db query here to get the subcategory of the main cat
            // Echo the result after performing a foreach loop like you did in the 
            // html file. <option value="value_id">value name</option>
            $result = ""; // store empty value first
            foreach ($dbresult as $value)
            {
                $result .= '<option value="$value['id']">$value['nombre']</option>';
            }
            echo $result;
        }
    }
}

SubCategory.js

$(document).ready(function() {
    $('select[name="id_especie"]').on('change', function() {
        var catid = $(this).val(); // will get the value attribute of the selected main category

        // Perform ajax request
        $.ajax({
            url: 'url-to-the-subcategory-controller', // remember to set this in your config/routes.php file
            method: 'POST',
            cache: false,
            data: {mainid: catid},
            dataType: 'html',
            success: function(data) {
                $('select#id_raza').html(data); // update the subcategory dropdown
            },
            error: function(data) {
                console.log(data);
            }
        });
    })
});

所以，您的第二个选择框 select#id_raza 在您的视图文件中显示如下：

<div class="col-12 col-sm-6">
        <label for="raza">Raza</label>
        <select class="form-control" id="id_raza" name="id_raza">
            <option value="">Seleccionar raza</option>
            <!-- Data here will be auto populated by ajax -->
        </select>
    </div>