多個下拉框聯動及回顯(Jquery)
阿新 • • 發佈:2019-01-26
應用場景如下:
程式碼實現如下:
<%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>下拉框聯動及回顯測試</title> <meta name="decorator" content="default"/> <script type="text/javascript"> //第一次聯動 function tableChange() { var tableVal = $("#tableSelect").val(); $("#columnSelect").empty(); if(tableVal=="report_disqualification") { $("#columnSelect").append("<option value='" + "" + "' " + "" + ">" + "請選擇" + "</option>"); $("#columnSelect").append("<option value='" + "ccjg" + "' " + "" + ">" + "抽查結果" + "</option>"); $("#s2id_columnSelect").children("a").find("span").text("請選擇"); }else if(tableVal=="report_examine_failure") { $("#columnSelect").append("<option value='" + "" + "' " + "" + ">" + "請選擇" + "</option>"); $("#columnSelect").append("<option value='" + "ccjg" + "' " + "" + ">" + "檢查結果" + "</option>"); $("#s2id_columnSelect").children("a").find("span").text("請選擇"); }else if(tableVal=="report_quality_lawless"){ $("#columnSelect").append("<option value='" + "" + "' " + "" + ">" + "請選擇" + "</option>"); $("#columnSelect").append("<option value='" + "wfwglx" + "' " + "" + ">" + "違法違規型別" + "</option>"); $("#columnSelect").append("<option value='" + "cflx" + "' " + "" + ">" + "處罰型別" + "</option>"); $("#s2id_columnSelect").children("a").find("span").text("請選擇"); } } function columnClick(){ $("#columnId").val("");//清空columnId var columnVal = $("#columnSelect").val(); $("#conditions_wfwglx").hide(); $("#conditions_ccjg").hide(); $("#conditions_cflx").hide(); $("#conditions_"+columnVal+"").show(); } function addConditions(){ var columnId = $("#columnId").val(); var columnVal = $("#columnSelect").val(); if(columnVal == ""){ alert("請選擇條件"); return } //控制不能重複新增相同分類條件 var attributeName = $("#columnSelect").find("option:selected").text(); var repeatFlag = "0"; $("div[class='baseClassificationColumnDiv']").find("a").each(function(i){ if($(this).html().indexOf(""+attributeName+"") >=0){ repeatFlag = "1"; } }); /* if(repeatFlag == "1"){ if(columnId == ""){ alert("不能新增重複類別"); return; } } */ var dateYear = $("#dateSelect").val(); var tableName = $("#tableSelect").find("option:selected").text(); var tableId = $("#tableSelect").val(); var time = ""; var attributeValue = ""; var attributeNameId = ""; var attributeValueId = ""; if(columnVal == "wfwglx"){ time = $("#conditions_wfwglx_time").val(); attributeNameId = "lawless_type"; $("input:checkbox[name=conditions_wfwglx_check]:checked").each(function(i){ if(0==i){ attributeValueId += $(this).val(); attributeValue += $(this).next().html(); }else{ attributeValueId += (","+$(this).val()); attributeValue += (","+$(this).next().html()); } }); }else if(columnVal == "ccjg"){ time = $("#conditions_ccjg_time").val(); attributeNameId = "result"; attributeValueId = $("input:radio[name=conditions_ccjg_radio]:checked").val(); attributeValue = $("input:radio[name=conditions_ccjg_radio]:checked").next().html(); }else if(columnVal == "cflx"){ time = $("#conditions_cflx_time").val(); attributeNameId = "administrative_penalty"; $("input:checkbox[name=conditions_cflx_check]:checked").each(function(i){ if(0==i){ attributeValueId += $(this).val(); attributeValue += $(this).next().html(); }else{ attributeValueId += (","+$(this).val()); attributeValue += (","+$(this).next().html()); } }); } if(time==""){ alert("請輸入次數"); return; } var paramStr = encodeURI("&dateYear="+dateYear+"&tableId="+tableId+"&tableName="+tableName+"&attributeNameId="+attributeNameId +"&attributeValueId="+attributeValueId+"&time="+time+"&classification=d"+"&attributeName="+attributeName+"&attributeValue="+attributeValue+"&columnId="+columnId); $.ajax({ type:"post", url:"${ctx}/classificationController/addClassifications?dateYear="+dateYear+"&tableId="+tableId+"&tableName="+tableName+"&attributeNameId="+attributeNameId +"&attributeValueId="+attributeValueId+"&time="+time+"&classification=d"+"&attributeName="+attributeName+"&attributeValue="+attributeValue+"&columnId="+columnId, success: function(result){ if(result.indexOf("success") >=0){ //重新整理iframe顯示 location.reload(); }else{ alert("新增條件失敗"); } } }); } function delColumn(columnId){ ymPrompt.confirmInfo({title:"提示",message:"您確定要刪除選中的記錄嗎?",width:"300px",height:"130px",btn:[['是','yes'],['否','no']], handler:function(a){ if(a=="yes"){ $.ajax({ type:"post", // url:"${ctx}/qualityCreditRecordController/getEnterpriseInfo?enterpriseCode="+code, url:"${ctx}/classificationController/delClassificationColumn?columnId="+columnId, success: function(result){ if(result.indexOf("success") >=0){ //重新整理iframe顯示 location.reload(); }else{ alert("刪除條件失敗"); } } }); } }}); } function updateColumn(columnId){ var tableYearVal = $("#tableYear_"+columnId).html(); var tableNameVal = $("#tableName_"+columnId).html(); var columnNameVal = $("#columnName_"+columnId).html(); var timeVal = $("#time_"+columnId).html(); var valueVal = $("#value_"+columnId).html(); $("#dateSelect").val(tableYearVal); var tableYearValue = $("#dateSelect").val(); var select = document.getElementById("dateSelect"); var index = select.selectedIndex; var selectedText = select.options[index].text; $("#s2id_dateSelect").children("a").find("span").text(selectedText); $("#tableSelect option").each(function(){ if($(this).text() == tableNameVal){ $(this).attr("selected","selected"); } }); $("#s2id_tableSelect").children("a").find("span").text(tableNameVal); tableChange(); $("#columnSelect option").each(function(){ if($(this).text() == columnNameVal){ $(this).attr("selected","selected"); } }); $("#s2id_columnSelect").children("a").find("span").text(columnNameVal); columnClick(); var columnVal = $("#columnSelect").val(); $("#conditions_"+columnVal+"_time").val(timeVal); if(columnVal == "wfwglx"){ $("input:checkbox[name=conditions_wfwglx_check]").each(function(i){ if(valueVal.indexOf($(this).next().html()) >=0){ $(this).attr("checked",true); } }); }else if(columnVal == "ccjg"){ $("input:radio[name=conditions_ccjg_radio]").each(function(i){ if(valueVal == $(this).val()){ $(this).attr("checked",true); } }); }else if(columnVal == "cflx"){ $("input:checkbox[name=conditions_cflx_check]").each(function(i){ if(valueVal.indexOf($(this).next().html()) >=0){ $(this).attr("checked",true); } }); } $("#columnId").val(columnId); } function page(n,s){ top.$.jBox.tip('正在載入資料,請稍候...','loading'); $("#searchForm").attr("action","${ctx}/classificationController/toDindex").submit(); return false; } </script> </head> <body id="winvp"> <!------------------------------行政許可資訊-----------------------------------> <form id="subform" name="subform" method="post" action=""> <!--新增排序隱藏值輸入框 --> <input type="hidden" id="columnId" value=""/> <ul class="nav nav-tabs"> <li class="active"><a href="${ctx}/classificationController/toDindex/">D類</a></li> </ul> <table width="100%" > <tr class="tr_11" style="color: #004779; font-weight: bold;background-image: url(<%=request.getContextPath()%>/images/table_topbj.gif );" > <td align="left" style="font-weight: bold; border-right: #a2bad9 0px solid; background-image:images/heaf/file_32x32.png" colspan="4"> D類條件設定 </td> </tr> </table> <table style="width: 100%; length=100%" bordercolor="#8FC5DC" cellpadding="0" cellspacing="0" bordercolorlight="#8FC5DC" bordercolordark="#FFFFFF" > <tr class="tr_1"> <td align="left" style="border-top: 1px solid #778899;height: 30px; border-right: 1px solid #778899;width:24%;"> <select id="dateSelect" style="font-size: 13px; margin: 0 30px 0 30px; width: 100px" name="dateSelect"> <option value="" >不限</option> <option value="3">3年內</option> <option value="2">2年內</option> <option value="1">1年內</option> </select> <select id="tableSelect" style="font-size: 13px; margin: 0 30px 0 30px; width: 200px" name="tableSelect" onchange="tableChange();"> <option value="">請選擇型別</option> <option value="report_disqualification">產品質量監督抽查記錄</option> <option value="report_quality_lawless">行政處罰資訊</option> <option value="report_examine_failure">監督檢查</option> </select> <select id="columnSelect" style="font-size: 13px; margin: 0 30px 0 30px; width: 100px" name="columnSelect" onclick="columnClick();"> </select> <span class="zt-hong">(可多次選擇)</span> </td> </tr> <tr id="conditions_wfwglx" class="tr_1" style="display: none;"> <td align="left" style="border-top: 1px solid #778899;height: 30px; border-right: 1px solid #778899;width:24%;"> <input type="text" style="font-size: 13px; margin: 0 0 0 30px;width: 100px;height:22px;" value="" id="conditions_wfwglx_time"/> 次 違法違規型別: <input type="checkbox" name="conditions_wfwglx_check" value="2c818bf834d05a760134d05c9cf30001" /><label>質量違法</label> <input type="checkbox" name="conditions_wfwglx_check" value="2c818bf834d05a760134d05cc6450002" /><label>標準違法</label> <input type="checkbox" name="conditions_wfwglx_check" value="2c818bf834d05a760134d05d033f0003" /><label>計量違法</label> <input type="checkbox" name="conditions_wfwglx_check" value="8a194968a83111198f480001a11" /><label>特種裝置違法</label> <input type="checkbox" name="conditions_wfwglx_check" value="25818bf834d05a760134d05d033f0008" /><label>認證違法</label> </td> </tr> <tr id="conditions_cflx" class="tr_1" style="display: none;"> <td align="left" style="border-top: 1px solid #778899;height: 30px; border-right: 1px solid #778899;width:24%;"> <input type="text" style="font-size: 13px; margin: 0 0 0 30px;width: 100px;height:22px;" value="" id="conditions_cflx_time"/> 次 處罰型別: <input type="checkbox" name="conditions_cflx_check" value="4028877a35d25bea0135d25d4a4f0001"/><label>警告</label> <input type="checkbox" name="conditions_cflx_check" value="4028877a35d25bea0135d25daa830003" /><label>罰款</label> <input type="checkbox" name="conditions_cflx_check" value="4128877a35d25bea0135d25e98010009" /><label>沒收違法所得</label> <input type="checkbox" name="conditions_cflx_check" value="4128877a35d25bea0135d25e98010011" /><label>沒收非法財物</label> <input type="checkbox" name="conditions_cflx_check" value="4028877a35d25bea0135d25dfbb80005" /><label>責令停產停業</label> <input type="checkbox" name="conditions_cflx_check" value="4028877a35d25bea0135d25e1f790006" /><label>暫扣許可證</label> <input type="checkbox" name="conditions_cflx_check" value="4028877a35d25bea0135d25e414d0007" /><label>吊銷許可證</label> <input type="checkbox" name="conditions_cflx_check" value="4028877a35d25bea0135d25e98010009" /><label>移送司法機關</label> </td> </tr> <tr id="conditions_ccjg" class="tr_1" style="display: none;"> <td align="left" style="border-top: 1px solid #778899;height: 30px; border-right: 1px solid #778899;width:24%;"> <input type="text" style="font-size: 13px; margin: 0 0 0 30px;width: 100px;height:22px;" value="" id="conditions_ccjg_time"/> 次 抽查結果: <input type="radio" name="conditions_ccjg_radio" value="合格"/><label>合格</label> <input type="radio" name="conditions_ccjg_radio" value="不合格"/><label>不合格</label> </td> </tr> <tr class="tr_1"> <td align="right" style="border-top: 1px solid #778899;height: 30px; border-right: 1px solid #778899;width:24%;"> <input type="button" onclick="addConditions();" style="font-size: 13px; margin: 0 30 0 30px;width: 100px;height:22px;" value="新增條件" id="addBtn"/> </td> </tr> </table> <table width="100%" > <tr class="tr_11" style="color: #004779; font-weight: bold;background-image: url(<%=request.getContextPath()%>/images/table_topbj.gif );" > <td align="left" style="font-weight: bold; border-right: #a2bad9 0px solid; background-image:images/heaf/file_32x32.png" colspan="4"> 已選擇條件 </td> </tr> </table> <div > <c:forEach items="${bccList}" var="baseClassificationColumn"> <div class="baseClassificationColumnDiv" style="text-align: left;"> <a href="javascript:updateColumn('${baseClassificationColumn.id}');" style="width: 700px;"> <c:if test="${baseClassificationColumn.classificationTableYear != ''}"> <span id="tableYear_${baseClassificationColumn.id}">${baseClassificationColumn.classificationTableYear}</span> 年以內, </c:if> <span id="tableName_${baseClassificationColumn.id}">${baseClassificationColumn.classificationTableName}</span> 出現 <span id="columnName_${baseClassificationColumn.id}">${baseClassificationColumn.columnName}</span>: <span id="value_${baseClassificationColumn.id}">${baseClassificationColumn.value}</span> <span id="time_${baseClassificationColumn.id}">${baseClassificationColumn.time}</span> 次 </a> <a href="javascript:delColumn('${baseClassificationColumn.id}');">刪除</a> </div> </c:forEach> </div> </form> <script type="text/javascript"> </script> </body> </html>