【JavaScript】下拉联动回显问题

首先是多级下拉联动实现：

这是DOM结构：

<div>
    <label style="margin-left: 10px;display: inline-block;"><span style="color: red;">*</span>&nbsp;故障类别1：</label>
    <select id="faultCategory1" style=" 49%;border: black 1px solid;">
        <option value ="0">请选择</option>
    </select>            
</div>
<div>
    <label style="margin-left: 10px;display: inline-block;"><span style="color: red;">*</span>&nbsp;故障类别2：</label>
    <select id="faultCategory2" style=" 49%;border: black 1px solid;">
        <option value ="0">请先选择（故障类别1）</option>
    </select>            
</div>
<div>
    <label style="margin-left: 10px;display: inline-block;"><span style="color: red;">*</span>&nbsp;故障类别3：</label>
    <select id="faultCategory3" style=" 49%;border: black 1px solid;">
        <option value ="0">请先选择（故障类别2）</option>
    </select>            
</div>
<div>
    <label style="margin-left: 10px;display: inline-block;"><span style="color: red;">*</span>&nbsp;故障类别4：</label>
    <select id="faultCategory4" style=" 49%;border: black 1px solid;">
        <option value ="0">请先选择（故障类别3）</option>
    </select>            
</div>

首先绑定这些Selector:

var $faultCategory1 = $('#faultCategory1'); // 故障类别1
var $faultCategory2 = $('#faultCategory2'); // 故障类别2
var $faultCategory3 = $('#faultCategory3'); // 故障类别3
var $faultCategory4 = $('#faultCategory4'); // 故障类别4

第一个下拉是直接请求即可：

dms.sendAjaxRequset({
    url : dms.getDmsPath()["claimUsed"] + "/claimfaultdata/all/queryfaultcgy1",
    async : false,
    timeout: 3000, //超时时间设置为3秒；
    contentType: "application/json",
    type: 'GET',
    success: function(result) {
        console.log(JSON.stringify(result));
        let opt = '';
        for (let i = 0; i < result.length; i++) {
            opt += '<option value="' + result[i].FAULT_CODE + '">' + result[i].FAULT_NAME + '</option>';
        }
        $faultCategory1.find('option:eq(0)').after(opt);
    },
    error : function (p1, p2, p3) {
        console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
    }
});

第二个就需要靠change事件监听改变，然后取第一个下拉选中的值来请求获取：

如果改变的是默认值，就不请求接口加载下拉

但是每一次改变选择都需要清空之前加载的下拉内容

$faultCategory1.change(function () {
    let faultCode = $faultCategory1.find('option:selected').val();
    // 类别3和类别4 清除
    $faultCategory3.find('option:eq(0)').nextAll().remove();
    $faultCategory4.find('option:eq(0)').nextAll().remove();
    $faultCategory2.find('option:eq(0)').nextAll().remove();
    if (faultCode == 0) return;
    setTimeout(function () {
        dms.sendAjaxRequset({
            url : dms.getDmsPath()["claimUsed"] + "/claimfaultdata/all/queryfaultcgy2/" + faultCode,
            async : false,
            timeout: 3000, //超时时间设置为3秒；
            contentType: "application/json",
            type: 'GET',
            success: function(result) {
                console.log(JSON.stringify(result));
                let opt = '';
                for (let i = 0; i < result.length; i++) {
                    opt += '<option value="' + result[i].FAULT_CODE + '">' + result[i].FAULT_NAME + '</option>';
                }
                $faultCategory2.find('option:eq(0)').after(opt);
            },
            error : function (p1, p2, p3) {
                console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
            }
        });
    }, 200);
});

以此类推3和4：

// 故障类别3
$faultCategory2.change(function () {
    let faultCode = $faultCategory2.find('option:selected').val();
    // 类别4 清除
    $faultCategory3.find('option:eq(0)').nextAll().remove();
    $faultCategory4.find('option:eq(0)').nextAll().remove();
    if (faultCode == 0) return;
    setTimeout(function () {
        dms.sendAjaxRequset({
            url : dms.getDmsPath()["claimUsed"] + "/claimfaultdata/all/queryfaultcgy3/" + faultCode,
            async : false,
            timeout: 3000, //超时时间设置为3秒；
            contentType: "application/json",
            type: 'GET',
            success: function(result) {
                console.log(JSON.stringify(result));
                let opt = '';
                for (let i = 0; i < result.length; i++) {
                    opt += '<option value="' + result[i].FAULT_CODE + '">' + result[i].FAULT_NAME + '</option>';
                }
                $faultCategory3.find('option:eq(0)').after(opt);
            },
            error : function (p1, p2, p3) {
                console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
            }
        });
    }, 200);
});
// 故障类别4
$faultCategory3.change(function () {
    let faultCode = $faultCategory3.find('option:selected').val();
    $faultCategory4.find('option:eq(0)').nextAll().remove();
    if (faultCode == 0) return;
    setTimeout(function () {
        dms.sendAjaxRequset({
            url : dms.getDmsPath()["claimUsed"] + "/claimfaultdata/all/queryfaultcgy4/" + faultCode,
            async : false,
            timeout: 3000, //超时时间设置为3秒；
            contentType: "application/json",
            type: 'GET',
            success: function(result) {
                console.log(JSON.stringify(result));
                let opt = '';
                for (let i = 0; i < result.length; i++) {
                    opt += '<option value="' + result[i].FAULT_CODE + '">' + result[i].FAULT_NAME + '</option>';
                }
                $faultCategory4.find('option:eq(0)').after(opt);
            },
            error : function (p1, p2, p3) {
                console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
            }
        });
    }, 200);
});

编辑页面下，接口会提供已经选中的值，要实现下拉列表选中的状态：

这里的解决办法是直接在加载的时候就设置好

这是另外一个下拉的列表，参数有变动，就不好封装函数处理，直接裸写了

setTimeout(function () {
    dms.sendAjaxRequset({
        url : dms.getDmsPath()["claimUsed"] + "/claimBaseData/10011001/vrtSel",
        async : false,
        timeout: 3000, //超时时间设置为3秒；
        contentType: "application/json",
        type: 'GET',
        success: function(resultI) {
            console.log(JSON.stringify(resultI));
            let opt = '';
            for (let i = 0; i < resultI.length; i++) {
                if (vrt == resultI[i].ITEM_CODE || vrt == resultI[i].VRT) {
                    vrt = resultI[i].VRT;
                    opt += '<option value="' + resultI[i].ITEM_CODE + '" vrt="' + resultI[i].VRT + '" selected>' + resultI[i].DESC_ZH + '</option>';
                    
                    dms.sendAjaxRequset({
                        url : dms.getDmsPath()["claimUsed"] + "/claimBaseData/10011001/" + vrt + "/vfgSel",
                        async : false,
                        timeout: 3000, //超时时间设置为3秒；
                        contentType: "application/json",
                        type: 'GET',
                        success: function(resultJ) {
                            // console.log('VFG-list：' + 'vfg - ' + vfg  + JSON.stringify(result));
                            let opt = '';
                            for (let j = 0; j < resultJ.length; j++) {
                                // opt += '<option value="' + result[i].ITEM_CODE + '" vfg="' + result[i].VFG + '">' + result[i].DESC_ZH + '</option>';
                                if (resultJ[j].VFG == vfg || resultJ[j].ITEM_CODE == vfg) {
                                    vfg = resultJ[j].VFG;
                                    opt += '<option value="' + resultJ[j].ITEM_CODE + '" vfg="' + resultJ[j].VFG + '" selected>' + resultJ[j].DESC_ZH + '</option>';
                                    
                                    dms.sendAjaxRequset({
                                        url : dms.getDmsPath()["claimUsed"] + "/claimBaseData/10011001/" + vfg + "/cccSel",
                                        async : false,
                                        timeout: 3000, //超时时间设置为3秒；
                                        contentType: "application/json",
                                        type: 'GET',
                                        success: function(resultK) {
                                            // console.log('CCC-list：' + 'ccc - '  + ccc +JSON.stringify(result));
                                            let opt3 = '';
                                            for (let k = 0; k < resultK.length; k++) {
                                                // opt += '<option value="' + result[i].ITEM_CODE + '" ccc="' + result[i].CCC + '">' + result[i].DESC_ZH + '</option>';
                                                if (resultK[k].CCC == ccc || resultK[k].ITEM_CODE == ccc) {
                                                    opt3 += '<option value="' + resultK[k].ITEM_CODE + '" ccc="' + resultK[k].CCC + '" selected>' + resultK[k].DESC_ZH + '</option>';
                                                    continue; // break;
                                                }
                                                opt3 += '<option value="' + resultK[k].ITEM_CODE + '" ccc="' + resultK[k].CCC + '">' + resultK[k].DESC_ZH + '</option>';
                                            }
                                            $CCC.find('option:eq(0)').after(opt3);
                                        },
                                        error : function (p1, p2, p3) {
                                            console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
                                        }
                                    });
                                    
                                    continue;
                                }
                                opt += '<option value="' + resultJ[j].ITEM_CODE + '" vfg="' + resultJ[j].VFG + '">' + resultJ[j].DESC_ZH + '</option>';
                            }
                            $VFG.find('option:eq(0)').after(opt);
                        },
                        error : function (p1, p2, p3) {
                            console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
                        }
                    });

                    continue;
                }
                opt += '<option value="' + resultI[i].ITEM_CODE + '" vrt="' + resultI[i].VRT + '">' + resultI[i].DESC_ZH + '</option>';
            }
            $VRT.find('option:eq(0)').after(opt);
        },
        error : function (p1, p2, p3) {
            console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
        }
    });
}, 350);

故障类别是比较固定的，这里就可以封装调用了

/**
 * 解决故障类别回显问题
 * @param {Object} i 对应接口的1，2，3，4
 * @param {Object} p 接口的url参数
 * @param {Object} targetElement 目标下拉的JqDom对象
 */
function promiseForSelectShow(i, pa1, pa2, targetElement) {
    dms.sendAjaxRequset({
        url : dms.getDmsPath()["claimUsed"] + "/claimfaultdata/all/queryfaultcgy"+ i + "/" + pa1,
        async : false,
        timeout: 3000, //超时时间设置为3秒；
        contentType: "application/json",
        type: 'GET',
        success: function(result) {
            // console.log(JSON.stringify(result));
            let opt = '';
            for (let i = 0; i < result.length; i++) {
                if (result[i].FAULT_CODE == pa2 ) { // || result[i]..FAULT_NAME == p
                    opt += '<option value="' + result[i].FAULT_CODE + '" selected>' + result[i].FAULT_NAME + '</option>';
                    continue;
                }    
                opt += '<option value="' + result[i].FAULT_CODE + '">' + result[i].FAULT_NAME + '</option>';
            }
            targetElement.find('option:eq(0)').after(opt);
        },
        error : function (p1, p2, p3) {
            console.log(JSON.stringify(p1) + '
' + JSON.stringify(p2) + '
' + JSON.stringify(p3) + '
');
        }
    });
}

promiseForSelectShow(2, qf1, qf2, $faultCategory2);
promiseForSelectShow(3, qf2, qf3, $faultCategory3);
promiseForSelectShow(4, qf3, qf4, $faultCategory4);