使用jsgrid/jqgrid时，如何实现父子下拉框联动并获取子框数据？

你之前用jsgrid处理普通下拉框联动是错误的——jsgrid是数据表格组件，并非用来实现下拉框依赖逻辑的工具。下面是正确的实现方案：

1. 基础HTML结构 #

假设你的下拉框结构如下：

<select id="parent-select-box">
  <option value="">请选择父选项</option>
  <!-- 父选项可预先渲染或动态加载 -->
</select>

<select id="child-select-box">
  <option value="">请先选择父选项</option>
</select>

2. 原生JavaScript联动实现 #

监听父下拉框的change事件，值变化时发送请求到后端获取子选项，再更新子下拉框：

// 获取下拉框元素
const parentSelect = document.getElementById('parent-select-box');
const childSelect = document.getElementById('child-select-box');

// 监听父下拉框变化
parentSelect.addEventListener('change', function() {
  const parentValue = this.value;

  // 父选项为空时重置子下拉框
  if (!parentValue) {
    childSelect.innerHTML = '<option value="">请先选择父选项</option>';
    return;
  }

  // 发送请求获取子选项数据
  fetch('/api/get-child-options', { // 替换为你的后端接口地址
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ parentId: parentValue })
  })
  .then(res => res.json())
  .then(data => {
    // 清空子下拉框并添加默认选项
    childSelect.innerHTML = '<option value="">请选择子选项</option>';
    
    // 遍历数据生成子选项
    data.forEach(item => {
      const option = document.createElement('option');
      option.value = item.id; // 替换为你的子选项值字段
      option.textContent = item.name; // 替换为你的子选项显示文本字段
      childSelect.appendChild(option);
    });

    // 如需获取子下拉框值，可在此处操作
    // console.log(childSelect.value);
  })
  .catch(err => {
    console.error('加载子选项失败:', err);
    childSelect.innerHTML = '<option value="">加载失败，请重试</option>';
  });
});

3. jQuery版本实现（如果项目用jQuery） #

$('#parent-select-box').on('change', function() {
  const parentValue = $(this).val();

  if (!parentValue) {
    $('#child-select-box').html('<option value="">请先选择父选项</option>');
    return;
  }

  $.ajax({
    url: '/api/get-child-options',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ parentId: parentValue }),
    success: function(data) {
      let options = '<option value="">请选择子选项</option>';
      data.forEach(item => {
        options += `<option value="${item.id}">${item.name}</option>`;
      });
      $('#child-select-box').html(options);

      // 获取子下拉框值
      // console.log($('#child-select-box').val());
    },
    error: function(xhr, status, err) {
      console.error('加载失败:', err);
      $('#child-select-box').html('<option value="">加载失败，请重试</option>');
    }
  });
});

关键说明 #

• 把/api/get-child-options替换为实际后端接口，接口需接收父选项值，返回格式类似[{id: 1, name: '子选项1'}, ...]的子选项列表。
• 你之前的代码无效，是因为误用了jsgrid组件，它的定位是生成数据表格，不适合处理下拉框联动逻辑。

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