使用jQuery，JSON和AJAX，codeigniter填充子菜单下拉菜单

要使用jQuery、JSON、AJAX和CodeIgniter来填充子菜单的下拉菜单，你需要完成以下几个步骤：

基础概念

jQuery: 一个快速、小巧且功能丰富的JavaScript库，用于简化HTML文档遍历、事件处理、动画和Ajax交互。
JSON (JavaScript Object Notation): 一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
AJAX (Asynchronous JavaScript and XML): 允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
CodeIgniter: 一个基于MVC架构的PHP框架，用于简化Web应用程序的开发。

应用场景

这种技术组合常用于动态网站，特别是当需要根据用户的选择或其他条件动态更新页面内容时。

实现步骤

后端 (CodeIgniter)

创建控制器方法：在CodeIgniter的控制器中创建一个方法，用于返回子菜单数据的JSON格式。

// 在控制器中
public function get_sub_menu() {
    $parent_id = $this->input->post('parent_id'); // 获取前端发送的父菜单ID
    $sub_menus = $this->menu_model->get_sub_menus($parent_id); // 假设有一个模型方法来获取数据
    echo json_encode($sub_menus); // 将数据编码为JSON并返回
}

创建模型方法：在模型中实现获取子菜单数据的逻辑。

// 在模型中
public function get_sub_menus($parent_id) {
    $query = $this->db->get_where('menus', array('parent_id' => $parent_id));
    return $query->result_array();
}

前端 (jQuery + AJAX)

HTML结构：创建一个下拉菜单，并为其添加一个事件监听器。

<select id="parent_menu">
    <!-- 父菜单选项 -->
</select>
<select id="sub_menu">
    <!-- 子菜单选项将通过AJAX填充 -->
</select>

jQuery脚本：使用jQuery监听父菜单的变化，并发送AJAX请求获取子菜单数据。

$(document).ready(function() {
    $('#parent_menu').change(function() {
        var parent_id = $(this).val();
        $.ajax({
            url: 'controller_name/get_sub_menu', // 控制器方法的URL
            type: 'POST',
            data: { parent_id: parent_id },
            dataType: 'json',
            success: function(data) {
                $('#sub_menu').empty(); // 清空现有选项
                $.each(data, function(index, item) {
                    $('#sub_menu').append($('<option>', {
                        value: item.id,
                        text: item.name
                    }));
                });
            },
            error: function(xhr, status, error) {
                console.error("AJAX请求失败: " + status + error);
            }
        });
    });
});