CodeIgniter框架select标签动态拉取数据库数据显示空白问题求助

问题排查 #

• 核心逻辑倒置：当前JS仅监听select的change事件触发请求，但页面初始化时select无有效可选项，无法触发事件拉取数据填充下拉框，你的需求是页面加载时先拉取全量产品数据填充下拉框，而非选中后才拉取。
• 参数键名不匹配：AJAX请求传递的参数名为id，但控制器中使用$_POST['product_name']取值，无法获取到传递的参数。
• 模型查询逻辑错误：填充下拉框需要查询所有产品数据，当前模型是根据ID查询单条产品，无法返回全量列表。
• 缺少下拉框填充逻辑：AJAX成功回调仅处理价格、库存赋值，没有将返回的产品数据生成<option>插入到select中，下拉框自然无内容。
• 选中值获取逻辑错误：空的<option>没有设置id属性，$(this).find(':selected')[0].id只能取到undefined。

修复代码 #

1. 视图（views） #

保持现有结构即可，无需修改。

2. 控制器（Controller） #

新增拉取全量产品的接口，原有获取单个产品详情的接口修正参数：

// 新增：页面加载时拉取全量产品填充下拉框
public function get_all_products(){
    $mydata['products'] = $this->lg->select_all_products();
    echo json_encode($mydata);
}

// 原有：获取单个产品详情接口修正参数
public function getproducts(){
    $id = $_POST['id']; // 修正参数名和AJAX传递的一致
    $mydata = $this->lg->select_product($id);
    echo json_encode($mydata);
}

3. 模型（Models） #

新增全量产品查询方法：

// 新增：查询所有产品
public function select_all_products(){
    $r = $this->db->select('*')->from('products')->get();
    return $r->result_array();
}

// 原有查询单条产品方法优化返回格式
public function select_product($id){
    $r= $this->db->select('*')->from('products')->WHERE('id',$id)->get();
    $rs=$r->row_array(); // 单条数据用row_array直接返回一维数组，不用result_array
    return $rs;
}

4. JS脚本 #

$(document).ready(function(){
    // 新增：页面加载时先拉取全量产品填充下拉框
    $.ajax({
        type:'POST',
        url:'<?php echo FORMURL;?>Adminlogin/get_all_products',
        dataType:'json',
        success:function(res)
        {
            let optionHtml = '<option value="">请选择产品</option>';
            // 遍历产品列表生成option
            res.products.forEach(item => {
                // 把产品id存到option的value里，产品名称作为显示内容
                optionHtml += `<option value="${item.id}">${item.product_name}</option>`
            })
            $('#products').html(optionHtml);
        }
    })

    // 原有选中产品后拉取详情的逻辑修正
    $('#products').change(function() {
        var id = $(this).val(); // 直接取选中option的value值，就是产品id
        $.ajax({
            type:'POST',
            url:'<?php echo FORMURL;?>Adminlogin/getproducts',
            data:{id : id},
            dataType:'json',
            success:function(data)
            {
                $('#price').text(data.product_price);
                $('#qty').text(data.product_qty);
            }
        });
    });
})

内容的提问来源于stack exchange，提问作者user15027596