级联下拉框编辑时回显问题。jQuery combobox下拉框回显

使用级联下拉框时，前一个下拉框的值决定了下一个下拉框的值，新增操作时通过onSelect事件（或onChange事件）可以很好地处理。但是编辑操作时，有一个数据回显过程，存在下拉框的 data加载 和下拉框的选定交叉执行的过程，即：

1.加载第一个下拉框的data

2,选定第一个下拉框的值

3.加载第二个下拉框的data

4.选定第二个下拉框的值

5.加载第三个下拉框的data

6.选定第三个下拉框的值

这种情况下直接加载下拉框的data，并且进行赋值，会出现第二个以后的下拉框无法回显的问题。

解决思路如下（例子使用jQuery combobox演示）：

1.定义两个全局变量（根据下拉框的级联个数而定，三个级联就定义两个变量）：

var editWrktId,editSitId;

2.第一级下拉框直接加载好，并配置onSelect事件（值被选定），第一级值被选定后加载第二级下拉框的data：

$("#add_proc").combobox({
        url: ctx + '/combo.do?action=getProc',
        method:'get',
        valueField:'id',
        textField:'text',
        editable: true,
        limitToList: true,
        panelHeight:'300px',
        onSelect:function(record){
          let process = record.id;
          $("#add_wrkt").combobox('clear');
          $("#add_sit").combobox('clear');
          $("#add_wrkt").combobox('loadData', []);
          $("#add_sit").combobox('loadData', []);
          $("#add_wrkt").combobox({
            url: ctx + '/combo.do?action=getWrkt&proc='+proc,
            method:'get',
            valueField:'id',
            textField:'text',
            editable: false,
            panelHeight:'300px',
          });
        }
      });

3.第二级下拉框添加onLoadSuccess事件（data加载完成）及onSelect事件（值被选定），onLoadSuccess事件用于data加载完毕后设置选定值，onSelect事件用于 设置第二级的选定值后 加载第三级的data：

$("#add_proc").combobox({
        url: ctx + '/combobox.do?action=getProc',
        method:'get',
        valueField:'id',
        textField:'text',
        editable: true,
        limitToList: true,
        panelHeight:'300px',
        onSelect:function(record){
          let proc = record.id;
          $("#add_wrkt").combobox('clear');
          $("#add_sit").combobox('clear');
          $("#add_wrkt").combobox('loadData', []);
          $("#add_sit").combobox('loadData', []);
          $("#add_wrkt").combobox({
            url: ctx + '/combo.do?action=getWrkS&proc='+proc,
            method:'get',
            valueField:'id',
            textField:'text',
            editable: false,
            panelHeight:'300px',
              onLoadSuccess:function(){
                  if (editWrktId) {
                      $("#add_wrkt").combobox("setValue",editWrkt);
                  }
              },
            onSelect:function(record){
              let wrktId = record.id;
              $("#add_sit").combobox('clear');
              $("#add_sit").combobox('loadData', []);
              $("#add_sit").combobox({
                url: ctx + '/combo.do?action=getSit&wrkt='+wrktId,
                method:'get',
                valueField:'id',
                textField:'text',
                editable: false,
                panelHeight:'300px',
              });
            }
          });
        }
      });

4.给第三级下拉框添加onLoadSuccess事件（data加载完毕），用于设置第三级的选定值。

$("#add_proc").combobox({
        url: ctx + '/combo.do?action=getProc',
        method:'get',
        valueField:'id',
        textField:'text',
        editable: true,
        limitToList: true,
        panelHeight:'300px',
        onSelect:function(record){
          let procId = record.id;
          $("#add_wrkt").combobox('clear');
          $("#add_sit").combobox('clear');
          $("#add_wrkt").combobox('loadData', []);
          $("#add_sit").combobox('loadData', []);
          $("#add_wrkt").combobox({
            url: ctx + '/combo.do?action=getWrkt&proc='+procId,
            method:'get',
            valueField:'id',
            textField:'text',
            editable: false,
            panelHeight:'300px',
              onLoadSuccess:function(){
                  if (editWrktId) {
                      $("#add_wrkt").combobox("setValue",editWrktId);
                  }
              },
            onSelect:function(record){
              let wrktId = record.id;
              $("#add_sit").combobox('clear');
              $("#add_sit").combobox('loadData', []);
              $("#add_sit").combobox({
                url: ctx + '/combo.do?action=getSit&wrkt='+wrktId,
                method:'get',
                valueField:'id',
                textField:'text',
                editable: false,
                panelHeight:'300px',
                  onLoadSuccess:function(){
                      if (editSitId) {
                          $("#add_sit").combobox("setValue",editSitId);
                      }
                  }
              });
            }
          });
        }
      });

关键点：

1.除了最后一级外，每一级都需要设置onSelect事件，用于加载下一级的data。

2.除了第一级外，每一级都需要设置onLoadSuccess事件，用于设置本级的选定值。

3.级联n个下拉框，需要n-1个全局变量，用于存储除第一级外的下拉框选定值。

4.打开编辑窗口时，首先给上一步中的全局变量赋值，然后给包括第一级下拉框在内的回显元素赋值。

5.打开新增窗口时，首先清除全局变量的值，以免影响新增数据（如果新增窗口和编辑窗口公用一个弹窗时，需要执行这一步）。

以上的操作逻辑就是：

加载第一级data——》设置第一级的值——》加载第二级data——》设置第二级的值——》加载第三级的data——》设置第三级的值……