今天项目中用到了联动的下拉框，这个是经常用的小技巧，就记录了下来，界面如下。
选择前如下:
选择中:
选择后下拉框都是联动的，4个联动下拉框:
jsp页面代码如下:
计算
安全
数据库
网络和加速
企业服务
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="/struts-tags" prefix="s" %> <% String ctx = request.getContextPath(); pageContext.setAttribute("ctx", ctx); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="<%=ctx %>/js/jquery.js" ></script> <script type="text/javascript" src="<%=ctx%>/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="<%=ctx%>/ckfinder/ckfinder.js"></script> <title>商家</title> <link href="<%=ctx %>/css/class.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="<%=ctx %>/js/My97DatePicker/WdatePicker.js"></script> <script type="text/javascript"> function checkFile() { //获得选择的文件的URL var fileURL = document.forms1.logoUplode.value; //获得文件的扩展名 fileURLfileURLSplit = fileURL.split("."); fileExt = fileURLSplit[fileURLSplit.length-1].toLowerCase(); alert(fileURL); //判断是否是图片文件 if (fileExt=="jpg" || fileExt=="bmp" || fileExt=="gif" || fileExt=="png") { //var obj = document.getElementById('lookpic'); //obj.src = fileURL; return true; } else { alert("请选择图片文件"); return false; } } function onValidate() { //提交保存 //验证 var dealerId = document.getElementById("dealerId").value; var modelId = document.getElementById("tbDealerSales.modelId").value; var modelId2 = document.getElementById("tbDealerSales.modelId2").value; if(dealerId==""){ document.getElementById("message").innerHTML = "请选择商家！"; return false; } if(modelId==""){ document.getElementById("message").innerHTML = "请选择车型！"; return false; } if(modelId2==""){ document.getElementById("message").innerHTML = "请选择具体车型,如果没有具体车型请在车型管理中添加"; return false; } if(trim(document.getElementById("tbDealerSales.salesPrice").value)=="") { document.getElementById("message").innerHTML = "报价不能为空！"; return false; } if(trim(document.getElementById("validStime").value)=="") { document.getElementById("message").innerHTML = "开始日期不能为空！"; return false; } if(trim(document.getElementById("validEtime").value)=="") { document.getElementById("message").innerHTML = "结束日期不能为空！"; return false; } return true; } function add(){ if(onValidate()){ document.forms[0].action="<%=ctx%>/priceAction!add.action"; document.forms[0].submit(); } } function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } function refreshCarBrand(val){ document.getElementById('tbDealerSales.modelId').options.length = 0; carBrand = document.getElementById('carBrand').value; //alert(carBrand); var str = $.ajax({ url: '<%=ctx%>/priceAction!getCarModel.action?carBrand=' + val + '&now=' + new Date().getTime(), async: false }).responseText; //str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; // alert(str); str = eval("(" + str + ")"); for (var i = 0; i < str.length; i++){ //alert(str[i].value); document.getElementById('tbDealerSales.modelId').options[i] = new Option(str[i].name,str[i].value); } if(document.getElementById('tbDealerSales.modelId').options.length == 0){ document.getElementById('tbDealerSales.modelId').options[i] = new Option("--暂无数据--",""); refreshCarBasic("99999"); }else{ refreshCarBasic(str[0].value); } } function refreshCarBasic(val){ document.getElementById('tbDealerSales.modelId2').options.length = 0; carBrand = document.getElementById('tbDealerSales.modelId').value; //alert(carBrand); var str = $.ajax({ url: '<%=ctx%>/priceAction!getCarDetail.action?carId=' + val + '&now=' + new Date().getTime(), async: false }).responseText; //str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; str = eval("(" + str + ")"); for (var i = 0; i < str.length; i++){ //alert(str[i].value); document.getElementById('tbDealerSales.modelId2').options[i] = new Option(str[i].name,str[i].value); } if(document.getElementById('tbDealerSales.modelId2').options.length == 0){ document.getElementById('tbDealerSales.modelId2').options[i] = new Option("--暂无数据--",""); } } function init(){ //refreshCarBrand(document.getElementById('carBrand').value); //refreshCarBasic(document.getElementById('tbDealerSales.modelId').value); } function selectCarBrand(val){ //alert(val); var str = $.ajax({ url: '<%=ctx%>/priceAction!getBand.action?dealerId=' + val , async: false }).responseText; //alert(str); var s = ""; carBrand = document.getElementById('carBrand'); var carBrandcarBrandlength = carBrand.options.length; for(var i=0;i<carBrandlength;i++){ if (carBrand.options[i].value == str) { carBrand.options[i].selected=true; break; } } refreshCarBrand(str); } </script> </head> <body onload="init()"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="26" height="25"><img src="<%=ctx %>/p_w_picpaths/main/main01.jpg" width="26" height="15"></td> <td width="62" class="bg01">当前位置：</td> <td class="bg01"><DIV id="u3_rtf"> 报价> <span class="red">新增报价</span></DIV></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="4" background="<%=ctx %>/p_w_picpaths/main/main02.gif"><img src="<%=ctx %>/p_w_picpaths/main/main02.gif" width="6" height="4"></td> </tr> </table> <s:form name="forms1" enctype="multipart/form-data" method="post"> <table border="0" width="70%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>选择商家：</td> <td> <s:select label="选择商家" cssStyle="width:120pt;" id="dealerId" name="tbDealerSales.dealerId" list="tbDealerInfoList" listKey="dealerId" listValue="dealerName" headerKey="" headerValue="----请选择商家----" theme="simple" onchange="selectCarBrand(this.value)"/> <font color="red">*</font> </td> </tr> <tr> <td>选择品牌：</td> <td> <s:select label="选择品牌" cssStyle="width:120pt;" id="carBrand" name="carBrand" list="tbCarBrandList" listKey="brandId" listValue="brandName" headerKey="" headerValue="----请选择品牌----" onchange="refreshCarBrand(this.value)" theme="simple" disabled="true"/> <font color="red">*一级/二级品牌,品牌在商家添加的时候已经关联</font> </td> </tr> <tr> <td>选择车型：</td> <td> <s:select id="tbDealerSales.modelId" cssStyle="width:120pt;" name="tbDealerSales.modelId" label="选择车型" list="#{ }" headerKey="" headerValue="----请选择车型----" onchange="refreshCarBasic(this.value)" theme="simple" /> <font color="red">*</font> </td> </tr> <tr> <td>选择具体车型：</td> <td> <s:select id="tbDealerSales.modelId2" cssStyle="width:120pt;" name="tbDealerSales.modelId2" label="具体车型" list="#{ }" headerKey="" headerValue="----请选择具体车型----" theme="simple"/> <font color="red">*</font> </td> </tr> <tr> <td>汽车报价：</td> <td> <input type="text" name="tbDealerSales.salesPrice" id="tbDealerSales.salesPrice" onkeyup="this.value=this.value.replace(/[^\d/.]/g,'')" maxlength='4'/> 万<font color="red">*</font> </td> </tr> <tr> <td>有效期：</td> <td> <input name="validStime" id="validStime" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'validEtime\')||\'2020-10-01\'}'})"/>至 <input name="validEtime" id="validEtime" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'validStime\')}',maxDate:'2020-10-01'})"/> <font color="red">*</font> </td> </tr> <tr> <td><input type="button" value="添加" onclick="add();"/></td> <td> <input type="button" value="取消" onclick="javascript:history.back();"/> <font color="red" id="message"><s:property value="#request.errorMessage"/></font> </td> </tr> </table> </s:form> </body> </html> 后台代码如下:
public void setCarBasic(String[] idArray){ List list = testService.getCarDetail(idArray[0]); tbCarBasicList = new ArrayList<TbCarBasic>(); System.out.println("tbCarBasicList.size():" + tbCarBasicList.size()); } 获取车型代码如下:
public String getCarModel(){ System.out.println("carBrand--------------------" + carBrand); response().setCharacterEncoding("UTF-8"); response().setContentType("text/html;charset=UTF-8"); try { StringBuffer sb = new StringBuffer(); String str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; List<TbCarBasic> list = testService.getCarModels(carBrand); sb.append("["); for(int i=0;i<list.size();i++){ TbCarBasic t = 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 (IOException e) { e.printStackTrace(); } return null; } 获取具体车型代码如下:
public String getCarDetail(){ // System.out.println("--------------------"); response().setCharacterEncoding("UTF-8"); response().setContentType("text/html;charset=UTF-8"); try { StringBuffer sb = new StringBuffer(); String str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; List<TbCarDetail> list = testService.getCarDetail(carId); sb.append("["); for(int i=0;i<list.size();i++){ TbCarDetail t = 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 (IOException e) { e.printStackTrace(); } return null; } 亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
