填充动态下拉列表，Codeigniter

Question

我正在尝试使用 Codeigniter 创建动态下拉列表，但在获取下一个下拉列表中的值时遇到问题。当我 select 和第一个下拉列表中的选项时，第二个下拉列表未填充：

我也不熟悉使用AJAX，我只是根据搜索到的内容编写脚本，所以请教我如何使动态下拉菜单工作。

这是我的模特：

public function category()
{
    $this->db->order_by("category", "ASC");

    $query = $this->db->get('categories');
    return $query->result();
}

function get_subcategory($parent_id)
{
    $this->db->where('parent_id', $parent_id);
    $this->db->order_by('sub_category', 'ASC');
    $query = $this->db->get('sub_categories');
    $output = '<option value="">Select Sub-Category</option>';
    foreach ($query->result() as $row) {
        $output .= '<option value="' . $row['id'] . '">' . $row['sub_category'] . '</option>';
    }
    return $output;
}

我的控制器：

public function category()
{
    $data['title'] = 'List of Category';

    $this->load->view('../admin/template/admin_header');
    $this->load->view('../admin/template/admin_topnav');
    $this->load->view('../admin/template/admin_sidebar');
    $this->load->view('../admin/category/category', $data);
    $this->load->view('../admin/template/admin_footer');
}

function get_subcategory()
{
    if ($this->input->post('parent_id')) {
        echo $this->Admin_model->get_subcategory($this->input->post('parent_id'));
    }
}

查看：

<div class="form-group">
    <label for="" class="control-label">Category</label>
    <select name="category" id="category" class="custom-select select2" required>
        <option value="">- Select Category -</option>
        <?php
            foreach ($category as $row) {
                echo '<option value="' . $row->id. '">' . $row->category . '</option>';
            }
        ?>
    </select>
</div>
<div class="form-group">
    <label for="" class="control-label">Sub Category</label>
    <select name="sub_category" id="sub_category_id" class="custom-select select2" required>
        <option value="">- Select Sub Category -</option>
    </select>
</div>

和脚本：

$(document).ready(function() {
    $('#category').change(function() {
        var parent_id = $('#category').val();
        if (parent_id != '') {
            $.ajax({
                url: "<?php echo base_url(); ?>admin/get_subcategory",
                method: "POST",
                data: {parent_id:parent_id},
                success: function(data) {
                    $('#sub_category_id').html(data);
                }
            });
        } else {
            $('#sub_category_id').html('<option value="">Select Sub Category</option>');
        }
    });
});

Answer 1

你的问题没有提到它，但你的 CSS 表明你的 select 实际上正在使用 Select2。当您将 select 初始化为 Select2 时，它会复制初始 HTML，并向其添加样式和 JS，这是您看到并与之交互的副本。原来的 HTML 不再可见或根本无法使用。

因此，如果您以后来修改原始 HTML，它将不会影响您已经生成的 Select2，并且可以在页面上看到与之交互。

一个解决方案是在修改后重新初始化 Select2。

更新

我已经添加了一个工作片段，其中有一些 hard-coded HTML 来模拟您的 AJAX returns。点击运行试一试

$(document).ready(function () {
    
    // Initialise Select2s
    $('.select2').select2();
    
    // Fake HTML, simulate what your AJAX returns
    let fakedHTMLResponse = '<option value="water">Water</option><option value="juice">Juice</option><option value="beer">Beer</option>';
    
    $('#category').change(function () {
        var parent_id = $('#category').val();
        // console.log('parent_id', parent_id);
        
        if (parent_id != '') {
            // Your AJAX call happens here, let's simulate the success
            // response it gets back, and handle it the same way.
            $('#sub_category_id').select2('destroy')
                .html(fakedHTMLResponse)
                .select2();

        } else {
            $('#sub_category_id').html('<option value="">Select Sub Category</option>');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="category" class="select2" name="food">
    <option value="">- Select Category -</option>
    <option value="fruits">Fruits</option>
    <option value="vegetables">Vegetables</option>
    <option value="cakes">Cakes</option>
</select>

<select id="sub_category_id" class="select2" name="drink">
    <option value="">- Select Sub Category -</option>
</select>

注：

Convention是获取数据时使用GET，更改数据时使用POST。您的 AJAX 调用只是检索要显示的数据，因此实际上应该是 GET；

如果您要多次使用 jQuery 选择器，it makes sense to cache them。例如在上面的代码中你应该做这样的事情：

let $category = $('#category');
let $sub = $('#sub_category_id');

// And then every time you need to use that selectors, use the variable, eg:
$category.select2();
$category.change(function ...
$sub.select2('destroy');
// etc

Answer 2

在您的成功回复中写下这个并从下面删除其他内容。

success: function(data) {
  $('#sub_category_id').append('<option value=>Select Sub Category</option>');
  for (var i=0; i<data.length; i++) { 
    $('#sub_category_id').append($('<option>', { 
      value: data[i].id,
      text : data[i].sub_category
    }));
  }
}

从您的控制器获取数组中的 AJAX 响应，然后运行通过 javascript 像这样。

id 是您数据库中的 id sub_category 是 sub_category 来自您的数据库

使用 ajax 响应数组。

填充动态下拉列表，Codeigniter

Populate dynamic dropdown, Codeigniter

codeigniter

更新