CI4结合jQuery实现select onChange联动查询MySQL关联数据

你当前缺的核心逻辑是后端按选中产品ID返回关联数据的接口，以及前端异步拉取数据渲染后续下拉的环节，按以下步骤修改即可：

1. 后端新增关联数据查询接口 #

首先在你的Incoming控制器中新增接口方法，接收前端传的产品ID，查询对应的SKU、变体数据后返回JSON格式结果：

// 追加到Incoming控制器类内部
public function getProductRelated()
{
    // 仅允许AJAX请求访问
    if (!$this->request->isAJAX()) {
        throw new \CodeIgniter\Exceptions\PageNotFoundException();
    }
    $productId = $this->request->getGet('product_id');
    // 按产品ID查询关联字段，如果你是一对多关系（1产品对应多SKU），把first()换成findAll()，调整对应查询条件即可
    $relatedData = $this->ProductModel->select('id, s_product_sku, s_product_var')
                                      ->where('id', $productId)
                                      ->first();
    return $this->response->setJSON([
        'code' => 200,
        'data' => $relatedData
    ]);
}

之后在路由文件app/Config/Routes.php中追加路由规则：

$routes->get('inv/incoming/getProductRelated', 'Inv\Incoming::getProductRelated');

2. 修正视图层原有错误 #

你当前视图中variant_code下拉写了全量产品的循环输出，会导致所有变体都展示，先把这段循环删掉，只保留默认空选项：

<div class="form-group mb-3">
    <label for="variant_code">Variant Code</label>
    <select class="form-control" id="variant_code" name="variant_code" style="width: 60%;" disabled>
        <option value="" selected disabled></option>
        <!-- 删掉原来的foreach循环代码 -->
    </select>
</div>

同时给product_sku和variant_code两个下拉加上select2初始化配置，和你之前写的size、color配置保持一致，避免样式异常。

3. 完善前端change事件联动逻辑 #

替换你原来卡在一半的product_codechange事件代码，加入AJAX请求、下拉重置、选项渲染逻辑：

$('#product_code').on('change', function() {
    // 切换产品时先重置后续两个下拉的状态，清空旧数据
    $('#product_sku').html('<option value="" selected disabled></option>').attr('disabled', 'disabled');
    $('#variant_code').html('<option value="" selected disabled></option>').attr('disabled', 'disabled');

    const productId = $(this).val();
    if (!productId) return;

    // 请求后端接口拿关联数据
    $.get('/inv/incoming/getProductRelated', {product_id: productId}, function(res) {
        if (res.code !== 200 || !res.data) {
            alert('未查询到关联SKU数据');
            return;
        }
        // 渲染SKU选项
        $('#product_sku').append(`<option value="${res.data.id}">${res.data.s_product_sku}</option>`);
        $('#product_sku').removeAttr('disabled');

        // 渲染变体选项，如果是一对多关系这里循环res.data生成option即可
        $('#variant_code').append(`<option value="${res.data.s_product_var}">${res.data.s_product_var}</option>`);
        $('#variant_code').removeAttr('disabled');

        // 通知select2组件更新选项
        $('#product_sku, #variant_code').trigger('change');
    }, 'json').fail(function() {
        alert('网络请求异常，请重试');
    });
});

适配调整提示 #

• 如果你的表结构是产品编码→多个SKU→多个变体的层级关系，只需要调整后端查询逻辑：先按产品ID查关联SKU列表，SKU选中后再新增接口查对应变体列表即可，联动逻辑和上面完全一致。
• 提交表单时记得给后端加数据校验，避免用户篡改下拉选项提交非法值。

页面效果示意图

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