如何写动态的联动下拉框,4联动下拉框

2025-02-13 技术教程

今天项目中用到了联动的下拉框，这个是经常用的小技巧，就记录了下来，界面如下。

选择前如下:

选择中:

选择后下拉框都是联动的，4个联动下拉框:

jsp页面代码如下:

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%><%@tagliburi="/struts-tags"prefix="s"%><%Stringctx=request.getContextPath();pageContext.setAttribute("ctx",ctx);%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><scripttype="text/javascript"src="<%=ctx%>/js/jquery.js"></script><scripttype="text/javascript"src="<%=ctx%>/ckeditor/ckeditor.js"></script><scripttype="text/javascript"src="<%=ctx%>/ckfinder/ckfinder.js"></script><title>商家</title><linkhref="<%=ctx%>/css/class.css"rel="stylesheet"type="text/css"><scripttype="text/javascript"src="<%=ctx%>/js/My97DatePicker/WdatePicker.js"></script><scripttype="text/javascript">functioncheckFile(){//获得选择的文件的URLvarfileURL=document.forms1.logoUplode.value;//获得文件的扩展名fileURLfileURLSplit=fileURL.split(".");fileExt=fileURLSplit[fileURLSplit.length-1].toLowerCase();alert(fileURL);//判断是否是图片文件if(fileExt=="jpg"||fileExt=="bmp"||fileExt=="gif"||fileExt=="png"){//varobj=document.getElementById('lookpic');//obj.src=fileURL;returntrue;}else{alert("请选择图片文件");returnfalse;}}functiononValidate(){//提交保存//验证vardealerId=document.getElementById("dealerId").value;varmodelId=document.getElementById("tbDealerSales.modelId").value;varmodelId2=document.getElementById("tbDealerSales.modelId2").value;if(dealerId==""){document.getElementById("message").innerHTML="请选择商家！";returnfalse;}if(modelId==""){document.getElementById("message").innerHTML="请选择车型！";returnfalse;}if(modelId2==""){document.getElementById("message").innerHTML="请选择具体车型,如果没有具体车型请在车型管理中添加";returnfalse;}if(trim(document.getElementById("tbDealerSales.salesPrice").value)==""){document.getElementById("message").innerHTML="报价不能为空！";returnfalse;}if(trim(document.getElementById("validStime").value)==""){document.getElementById("message").innerHTML="开始日期不能为空！";returnfalse;}if(trim(document.getElementById("validEtime").value)==""){document.getElementById("message").innerHTML="结束日期不能为空！";returnfalse;}returntrue;}functionadd(){if(onValidate()){document.forms[0].action="<%=ctx%>/priceAction!add.action";document.forms[0].submit();}}functiontrim(str){returnstr.replace(/(^\s*)|(\s*$)/g,"");}functionrefreshCarBrand(val){document.getElementById('tbDealerSales.modelId').options.length=0;carBrand=document.getElementById('carBrand').value;//alert(carBrand);varstr=$.ajax({url:'<%=ctx%>/priceAction!getCarModel.action?carBrand='+val+'&now='+newDate().getTime(),async:false}).responseText;//str="[{'name':'1','value':'1'},{'name':'2','value':'2'}]";//alert(str);str=eval("("+str+")");for(vari=0;i<str.length;i++){//alert(str[i].value);document.getElementById('tbDealerSales.modelId').options[i]=newOption(str[i].name,str[i].value);}if(document.getElementById('tbDealerSales.modelId').options.length==0){document.getElementById('tbDealerSales.modelId').options[i]=newOption("--暂无数据--","");refreshCarBasic("99999");}else{refreshCarBasic(str[0].value);}}functionrefreshCarBasic(val){document.getElementById('tbDealerSales.modelId2').options.length=0;carBrand=document.getElementById('tbDealerSales.modelId').value;//alert(carBrand);varstr=$.ajax({url:'<%=ctx%>/priceAction!getCarDetail.action?carId='+val+'&now='+newDate().getTime(),async:false}).responseText;//str="[{'name':'1','value':'1'},{'name':'2','value':'2'}]";str=eval("("+str+")");for(vari=0;i<str.length;i++){//alert(str[i].value);document.getElementById('tbDealerSales.modelId2').options[i]=newOption(str[i].name,str[i].value);}if(document.getElementById('tbDealerSales.modelId2').options.length==0){document.getElementById('tbDealerSales.modelId2').options[i]=newOption("--暂无数据--","");}}functioninit(){//refreshCarBrand(document.getElementById('carBrand').value);//refreshCarBasic(document.getElementById('tbDealerSales.modelId').value);}functionselectCarBrand(val){//alert(val);varstr=$.ajax({url:'<%=ctx%>/priceAction!getBand.action?dealerId='+val,async:false}).responseText;//alert(str);vars="";carBrand=document.getElementById('carBrand');varcarBrandcarBrandlength=carBrand.options.length;for(vari=0;i<carBrandlength;i++){if(carBrand.options[i].value==str){carBrand.options[i].selected=true;break;}}refreshCarBrand(str);}</script></head><bodyonload="init()"><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="26"height="25"><imgsrc="<%=ctx%>/p_w_picpaths/main/main01.jpg"width="26"height="15"></td><tdwidth="62"class="bg01">当前位置：</td><tdclass="bg01"><DIVid="u3_rtf">报价><spanclass="red">新增报价</span></DIV></td></tr></table><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="4"background="<%=ctx%>/p_w_picpaths/main/main02.gif"><imgsrc="<%=ctx%>/p_w_picpaths/main/main02.gif"width="6"height="4"></td></tr></table><s:formname="forms1"enctype="multipart/form-data"method="post"><tableborder="0"width="70%"border="0"cellspacing="0"cellpadding="0"><tr><td>选择商家：</td><td><s:selectlabel="选择商家"cssStyle="width:120pt;"id="dealerId"name="tbDealerSales.dealerId"list="tbDealerInfoList"listKey="dealerId"listValue="dealerName"headerKey=""headerValue="----请选择商家----"theme="simple"onchange="selectCarBrand(this.value)"/><fontcolor="red">*</font></td></tr><tr><td>选择品牌：</td><td><s:selectlabel="选择品牌"cssStyle="width:120pt;"id="carBrand"name="carBrand"list="tbCarBrandList"listKey="brandId"listValue="brandName"headerKey=""headerValue="----请选择品牌----"onchange="refreshCarBrand(this.value)"theme="simple"disabled="true"/><fontcolor="red">*一级/二级品牌,品牌在商家添加的时候已经关联</font></td></tr><tr><td>选择车型：</td><td><s:selectid="tbDealerSales.modelId"cssStyle="width:120pt;"name="tbDealerSales.modelId"label="选择车型"list="#{}"headerKey=""headerValue="----请选择车型----"onchange="refreshCarBasic(this.value)"theme="simple"/><fontcolor="red">*</font></td></tr><tr><td>选择具体车型：</td><td><s:selectid="tbDealerSales.modelId2"cssStyle="width:120pt;"name="tbDealerSales.modelId2"label="具体车型"list="#{}"headerKey=""headerValue="----请选择具体车型----"theme="simple"/><fontcolor="red">*</font></td></tr><tr><td>汽车报价：</td><td><inputtype="text"name="tbDealerSales.salesPrice"id="tbDealerSales.salesPrice"onkeyup="this.value=this.value.replace(/[^\d/.]/g,'')"maxlength='4'/>万<fontcolor="red">*</font></td></tr><tr><td>有效期：</td><td><inputname="validStime"id="validStime"class="Wdate"type="text"onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'validEtime\')||\'2020-10-01\'}'})"/>至<inputname="validEtime"id="validEtime"class="Wdate"type="text"onFocus="WdatePicker({minDate:'#F{$dp.$D(\'validStime\')}',maxDate:'2020-10-01'})"/><fontcolor="red">*</font></td></tr><tr><td><inputtype="button"value="添加"onclick="add();"/></td><td><inputtype="button"value="取消"onclick="javascript:history.back();"/><fontcolor="red"id="message"><s:propertyvalue="#request.errorMessage"/></font></td></tr></table></s:form></body></html>

后台代码如下:

publicvoidsetCarBasic(String[]idArray){Listlist=testService.getCarDetail(idArray[0]);tbCarBasicList=newArrayList<TbCarBasic>();System.out.println("tbCarBasicList.size():"+tbCarBasicList.size());}

获取车型代码如下:

publicStringgetCarModel(){System.out.println("carBrand--------------------"+carBrand);response().setCharacterEncoding("UTF-8");response().setContentType("text/html;charset=UTF-8");try{StringBuffersb=newStringBuffer();Stringstr="[{'name':'1','value':'1'},{'name':'2','value':'2'}]";List<TbCarBasic>list=testService.getCarModels(carBrand);sb.append("[");for(inti=0;i<list.size();i++){TbCarBasict=list.get(i);if(i==0){sb.append("{'name':'"+t.getCarName()+"','value':'"+t.getCarId()+"'}");}else{sb.append(",{'name':'"+t.getCarName()+"','value':'"+t.getCarId()+"'}");}}sb.append("]");//System.out.println(sb.toString());response().getWriter().write(sb.toString());response().getWriter().close();}catch(IOExceptione){e.printStackTrace();}returnnull;}

获取具体车型代码如下:

publicStringgetCarDetail(){//System.out.println("--------------------");response().setCharacterEncoding("UTF-8");response().setContentType("text/html;charset=UTF-8");try{StringBuffersb=newStringBuffer();Stringstr="[{'name':'1','value':'1'},{'name':'2','value':'2'}]";List<TbCarDetail>list=testService.getCarDetail(carId);sb.append("[");for(inti=0;i<list.size();i++){TbCarDetailt=list.get(i);if(i==0){sb.append("{'name':'"+t.getModelName()+"','value':'"+t.getModelId()+"'}");}else{sb.append(",{'name':'"+t.getModelName()+"','value':'"+t.getModelId()+"'}");}}sb.append("]");System.out.println(sb.toString());response().getWriter().write(sb.toString());//response().getWriter().write(str);response().getWriter().close();}catch(IOExceptione){e.printStackTrace();}returnnull;}