【JavaScript】下拉联动回显问题
首先是多级下拉联动实现：
这是DOM结构：
<div> <label style="margin-left: 10px;display: inline-block;"><span style="color: red;">*</span> 故障类别1：</label> <select id="faultCategory1" style="width: 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> 故障类别2：</label> <select id="faultCategory2" style="width: 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> 故障类别3：</label> <select id="faultCategory3" style="width: 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> 故障类别4：</label> <select id="faultCategory4" style="width: 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } });
第二个就需要靠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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); }, 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); }, 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); }, 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); }, 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) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); } promiseForSelectShow(2, qf1, qf2, $faultCategory2); promiseForSelectShow(3, qf2, qf3, $faultCategory3); promiseForSelectShow(4, qf3, qf4, $faultCategory4);
