应用场景如下：
代码实现如下：
<%@ 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" οnchange="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" οnclick="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" οnclick="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>
版权声明：本文为banjing_1993原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。