如何基于PHP/JQuery实现下拉框联动自动填充

一、修正OL Code下拉框的触发配置 #

首先需要给OL Code下拉框绑定触发事件，同时修正选择器ID以匹配前端JS逻辑：

create.php 中的OL Code下拉框修改： #

<div class="form-group">
  <label for="gross_amount" class="col-sm-2 control-label" style="text-align:left;">OL Code</label>
  <div class="col-sm-6">
    <select class="form-control" id="olcode_1" name="table_name" onchange="getProd(1)">
      <?php foreach ($orderlist_data as $key => $value): ?>
      <option value="<?php echo $value['id'] ?>"><?php echo $value['ol_code'] ?></option>  
      <?php endforeach ?>                     
    </select>
  </div>
</div>

edit.php 中的OL Code下拉框修改（适配动态行ID）： #

<div class="form-group">
  <label for="gross_amount" class="col-sm-2 control-label" style="text-align:left;">OL Code</label>
  <div class="col-sm-6">
    <select class="form-control" id="olcode_<?php echo $x; ?>" name="table_name" onchange="getProd(<?php echo $x; ?>)">
      <?php foreach ($orderlist_data as $key => $value): ?>
      <option value="<?php echo $value['id'] ?>" <?php if($val['orderlist_id'] == $value['id']) echo 'selected'; ?>><?php echo $value['ol_code'] ?></option>  
      <?php endforeach ?>                     
    </select>
  </div>
</div>

二、完善后端接口逻辑 #

在orderlist/getOrderListById接口中，根据传入的orderlist_id判断对应的OL Code，返回预设产品数据：

public function getOrderListById() {
    $orderlist_id = $this->input->post('orderlist_id');
    // 从数据库查询对应订单列表信息
    $orderlist = $this->db->get_where('orderlists', ['id' => $orderlist_id])->row_array();
    
    $response = ['products' => []];
    
    // 匹配目标OL Code，返回预设产品
    if(!empty($orderlist) && $orderlist['ol_code'] === 'OLCODE-1E6E') {
        // 可替换为数据库查询逻辑，此处为示例预设数据
        $response['products'] = [
            ['id' => 1, 'name' => '预设产品1'],
            ['id' => 2, 'name' => '预设产品2']
        ];
    }
    
    echo json_encode($response);
}

三、完善前端AJAX函数逻辑 #

补全getProd函数的空值处理与成功回调逻辑，实现产品下拉框的动态填充：

function getProd(row_id) {
  var orderlist_id = $("#olcode_"+row_id).val();    
  var productSelect = $("#product_"+row_id);
  
  if(orderlist_id === "") {
    // 清空下拉框，恢复默认选项
    productSelect.empty();
    // 根据页面类型选择默认选项：create页用下面第一行，edit页用第二行
    productSelect.append('<option value="maincat" selected>--Select Products--</option>');
    // productSelect.append('<option value="" selected></option>');
    // 触发下拉框变更事件，适配关联逻辑
    productSelect.trigger('change');
  } else {
    $.ajax({
      url: base_url + 'orderlist/getOrderListById',
      type: 'post',
      data: {orderlist_id : orderlist_id},
      dataType: 'json',
      success:function(response) {
        // 清空现有选项
        productSelect.empty();
        
        // 填充预设产品选项
        if(response.products && response.products.length > 0) {
          response.products.forEach(function(product) {
            productSelect.append(`<option value="${product.id}">${product.name}</option>`);
          });
          // 可选：默认选中第一个产品
          // productSelect.val(response.products[0].id);
        } else {
          // 无预设产品时显示默认选项
          productSelect.append('<option value="maincat" selected>--Select Products--</option>');
          // edit页替换为：productSelect.append('<option value="" selected></option>');
        }
        
        // 触发变更事件，确保关联的getProductData函数执行
        productSelect.trigger('change');
      },
      error:function() {
        // 请求失败时恢复默认状态
        productSelect.empty();
        productSelect.append('<option value="maincat" selected>--Select Products--</option>');
      }
    }); 
  }
}

注意事项 #

• 若产品下拉框使用了Select2等插件，需在填充选项后调用productSelect.select2('destroy').select2();刷新样式
• 后端需做好参数校验与SQL注入防护，避免安全问题
• edit页中可根据实际需求调整默认选项的显示逻辑

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