行业资讯

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

发布时间：2020-06-03 08:10:11 作者：xiaoqiang_sea
来源：网络 阅读：751

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

选择前如下:

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

选择中:

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

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

 

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

jsp页面代码如下:

 

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
  4. <%@ taglib uri="/struts-tags" prefix="s" %> 
  5. <% 
  6.     String ctx = request.getContextPath(); 
  7.     pageContext.setAttribute("ctx", ctx); 
  8. %> 
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  10. <html> 
  11. <head> 
  12. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  13. <script type="text/javascript" src="<%=ctx %>/js/jquery.js" ></script> 
  14. <script type="text/javascript" src="<%=ctx%>/ckeditor/ckeditor.js"></script> 
  15. <script type="text/javascript" src="<%=ctx%>/ckfinder/ckfinder.js"></script> 
  16. <title>商家</title> 
  17. <link href="<%=ctx %>/css/class.css" rel="stylesheet" type="text/css"> 
  18. <script type="text/javascript" src="<%=ctx %>/js/My97DatePicker/WdatePicker.js"></script> 
  19. <script type="text/javascript"> 
  20. function checkFile() 
  21. {  
  22.     //获得选择的文件的URL 
  23.     var fileURL = document.forms1.logoUplode.value; 
  24.     //获得文件的扩展名 
  25.     fileURLfileURLSplit = fileURL.split("."); 
  26.     fileExt = fileURLSplit[fileURLSplit.length-1].toLowerCase(); 
  27.     alert(fileURL); 
  28.     //判断是否是图片文件 
  29.     if (fileExt=="jpg" || fileExt=="bmp" || fileExt=="gif" || fileExt=="png") 
  30.     { 
  31.         //var obj = document.getElementById('lookpic'); 
  32.         //obj.src = fileURL; 
  33.         return true; 
  34.     } 
  35.     else 
  36.     { 
  37.         alert("请选择图片文件"); 
  38.         return false; 
  39.     } 
  40. }    
  41. function onValidate() { 
  42.     //提交保存 
  43.     //验证 
  44.     var dealerId = document.getElementById("dealerId").value; 
  45.     var modelId = document.getElementById("tbDealerSales.modelId").value; 
  46.     var modelId2 = document.getElementById("tbDealerSales.modelId2").value; 
  47.     if(dealerId==""){ 
  48.         document.getElementById("message").innerHTML = "请选择商家！"; 
  49.         return false; 
  50.     } 
  51.     if(modelId==""){ 
  52.         document.getElementById("message").innerHTML = "请选择车型！"; 
  53.         return false; 
  54.     } 
  55.     if(modelId2==""){ 
  56.         document.getElementById("message").innerHTML = "请选择具体车型,如果没有具体车型请在车型管理中添加"; 
  57.         return false; 
  58.     } 
  59.     if(trim(document.getElementById("tbDealerSales.salesPrice").value)=="") { 
  60.         document.getElementById("message").innerHTML = "报价不能为空！"; 
  61.         return false; 
  62.     } 
  63.     if(trim(document.getElementById("validStime").value)=="") { 
  64.         document.getElementById("message").innerHTML = "开始日期不能为空！"; 
  65.         return false; 
  66.     } 
  67.      if(trim(document.getElementById("validEtime").value)=="") { 
  68.         document.getElementById("message").innerHTML = "结束日期不能为空！"; 
  69.         return false; 
  70.     } 
  71.     return true; 
  72. } 
  73. function add(){ 
  74.     if(onValidate()){ 
  75.         document.forms[0].action="<%=ctx%>/priceAction!add.action"; 
  76.         document.forms[0].submit();  
  77.     } 
  78. } 
  79. function trim(str){  
  80.     return str.replace(/(^\s*)|(\s*$)/g, "");  
  81. }  
  82. function refreshCarBrand(val){ 
  83.     document.getElementById('tbDealerSales.modelId').options.length = 0; 
  84.     carBrand = document.getElementById('carBrand').value; 
  85.     //alert(carBrand); 
  86.     var str = $.ajax({ 
  87.         url: '<%=ctx%>/priceAction!getCarModel.action?carBrand=' + val + '&now=' + new Date().getTime(), 
  88.         async: false 
  89.         }).responseText; 
  90.     //str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; 
  91.    // alert(str); 
  92.     str = eval("(" + str + ")"); 
  93.      
  94.     for (var i = 0; i < str.length; i++){ 
  95.         //alert(str[i].value); 
  96.         document.getElementById('tbDealerSales.modelId').options[i] = new Option(str[i].name,str[i].value); 
  97.     } 
  98.     if(document.getElementById('tbDealerSales.modelId').options.length == 0){ 
  99.         document.getElementById('tbDealerSales.modelId').options[i] = new Option("--暂无数据--",""); 
  100.         refreshCarBasic("99999"); 
  101.     }else{ 
  102.         refreshCarBasic(str[0].value); 
  103.     } 
  104. } 
  105. function refreshCarBasic(val){ 
  106.     document.getElementById('tbDealerSales.modelId2').options.length = 0; 
  107.     carBrand = document.getElementById('tbDealerSales.modelId').value; 
  108.     //alert(carBrand); 
  109.     var str = $.ajax({ 
  110.         url: '<%=ctx%>/priceAction!getCarDetail.action?carId=' + val + '&now=' + new Date().getTime(), 
  111.         async: false 
  112.         }).responseText; 
  113.     //str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; 
  114.     str = eval("(" + str + ")"); 
  115.     for (var i = 0; i < str.length; i++){ 
  116.         //alert(str[i].value); 
  117.         document.getElementById('tbDealerSales.modelId2').options[i] = new Option(str[i].name,str[i].value); 
  118.     } 
  119.     if(document.getElementById('tbDealerSales.modelId2').options.length == 0){ 
  120.         document.getElementById('tbDealerSales.modelId2').options[i] = new Option("--暂无数据--",""); 
  121.     } 
  122. } 
  123.  
  124. function init(){ 
  125.     //refreshCarBrand(document.getElementById('carBrand').value); 
  126.     //refreshCarBasic(document.getElementById('tbDealerSales.modelId').value); 
  127. } 
  128.  
  129. function selectCarBrand(val){ 
  130.     //alert(val); 
  131.     var str = $.ajax({ 
  132.         url: '<%=ctx%>/priceAction!getBand.action?dealerId=' + val , 
  133.         async: false         
  134.     }).responseText; 
  135.     //alert(str); 
  136.     var s = ""; 
  137.     carBrand = document.getElementById('carBrand'); 
  138.     var carBrandcarBrandlength = carBrand.options.length; 
  139.     for(var i=0;i<carBrandlength;i++){ 
  140.         if (carBrand.options[i].value == str)       {     
  141.             carBrand.options[i].selected=true; 
  142.             break; 
  143.         }        
  144.     }  
  145.     refreshCarBrand(str); 
  146. } 
  147. </script> 
  148. </head> 
  149.  
  150. <body onload="init()"> 
  151.     <table width="100%"  border="0" cellspacing="0" cellpadding="0">    
  152.       <tr> 
  153.         <td width="26" height="25"><img src="<%=ctx %>/p_w_picpaths/main/main01.jpg" width="26" height="15"></td> 
  154.         <td width="62" class="bg01">当前位置：</td> 
  155.         <td class="bg01"><DIV id="u3_rtf"> 报价&gt;  <span class="red">新增报价</span></DIV></td> 
  156.       </tr> 
  157.     </table> 
  158.     <table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
  159.         <tr> 
  160.           <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> 
  161.         </tr> 
  162.       </table> 
  163. <s:form name="forms1" enctype="multipart/form-data" method="post"> 
  164. <table border="0" width="70%"  border="0" cellspacing="0" cellpadding="0"> 
  165.     <tr> 
  166.         <td>选择商家：</td> 
  167.         <td> 
  168.             <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)"/> 
  169.             <font color="red">*</font> 
  170.         </td> 
  171.     </tr> 
  172.     <tr> 
  173.         <td>选择品牌：</td> 
  174.         <td> 
  175.             <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"/>            
  176.             <font color="red">*一级/二级品牌,品牌在商家添加的时候已经关联</font> 
  177.         </td> 
  178.     </tr> 
  179.     <tr> 
  180.         <td>选择车型：</td> 
  181.         <td> 
  182.             <s:select id="tbDealerSales.modelId"   cssStyle="width:120pt;"  name="tbDealerSales.modelId" label="选择车型" list="#{ }" headerKey="" headerValue="----请选择车型----"  onchange="refreshCarBasic(this.value)" theme="simple" /> 
  183.             <font color="red">*</font> 
  184.         </td> 
  185.     </tr> 
  186.     <tr> 
  187.         <td>选择具体车型：</td> 
  188.         <td> 
  189.             <s:select id="tbDealerSales.modelId2"   cssStyle="width:120pt;"  name="tbDealerSales.modelId2" label="具体车型" list="#{ }" headerKey="" headerValue="----请选择具体车型----" theme="simple"/> 
  190.             <font color="red">*</font> 
  191.         </td> 
  192.     </tr> 
  193.     <tr> 
  194.         <td>汽车报价：</td> 
  195.         <td> 
  196.             <input type="text" name="tbDealerSales.salesPrice" id="tbDealerSales.salesPrice" onkeyup="this.value=this.value.replace(/[^\d/.]/g,'')"  maxlength='4'/> 
  197.             万<font color="red">*</font> 
  198.         </td> 
  199.     </tr> 
  200.     <tr> 
  201.         <td>有效期：</td> 
  202.         <td> 
  203.             <input name="validStime" id="validStime" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'validEtime\')||\'2020-10-01\'}'})"/>至  
  204.             <input name="validEtime" id="validEtime" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'validStime\')}',maxDate:'2020-10-01'})"/>              
  205.             <font color="red">*</font> 
  206.         </td> 
  207.     </tr> 
  208.     <tr> 
  209.         <td><input  type="button" value="添加" onclick="add();"/></td> 
  210.         <td> 
  211.          <input type="button" value="取消" onclick="javascript:history.back();"/> 
  212.         <font color="red" id="message"><s:property value="#request.errorMessage"/></font> 
  213.         </td> 
  214.     </tr> 
  215. </table> 
  216. </s:form> 
  217. </body> 
  218. </html> 

后台代码如下:

 

  1. public void setCarBasic(String[] idArray){ 
  2.     List list = testService.getCarDetail(idArray[0]); 
  3.     tbCarBasicList = new ArrayList<TbCarBasic>(); 
  4.     System.out.println("tbCarBasicList.size():" + tbCarBasicList.size()); 
  5.      
  6. } 

获取车型代码如下:

  1.     public String getCarModel(){ 
  2.         System.out.println("carBrand--------------------" + carBrand); 
  3.         response().setCharacterEncoding("UTF-8"); 
  4.         response().setContentType("text/html;charset=UTF-8"); 
  5.         try { 
  6.             StringBuffer sb = new  StringBuffer(); 
  7.              
  8.             String str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; 
  9.             List<TbCarBasic> list = testService.getCarModels(carBrand); 
  10.             sb.append("["); 
  11.             for(int i=0;i<list.size();i++){ 
  12.                 TbCarBasic t = list.get(i); 
  13.                 if(i==0){ 
  14.                     sb.append("{'name':'"+t.getCarName()+"','value':'"+t.getCarId()+"'}"); 
  15.                 }else{ 
  16.                     sb.append(",{'name':'"+t.getCarName()+"','value':'"+t.getCarId()+"'}"); 
  17.                 } 
  18.             } 
  19.             sb.append("]"); 
  20. //          System.out.println(sb.toString()); 
  21.             response().getWriter().write(sb.toString()); 
  22.             response().getWriter().close();  
  23.         } catch (IOException e) { 
  24.             e.printStackTrace(); 
  25.         } 
  26.         return null; 
  27.     } 

获取具体车型代码如下:

  1.     public String getCarDetail(){ 
  2. //      System.out.println("--------------------"); 
  3.         response().setCharacterEncoding("UTF-8"); 
  4.         response().setContentType("text/html;charset=UTF-8"); 
  5.         try { 
  6.             StringBuffer sb = new  StringBuffer(); 
  7.              
  8.             String str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]"; 
  9.             List<TbCarDetail> list = testService.getCarDetail(carId); 
  10.             sb.append("["); 
  11.             for(int i=0;i<list.size();i++){ 
  12.                 TbCarDetail t = list.get(i); 
  13.                 if(i==0){ 
  14.                     sb.append("{'name':'"+t.getModelName()+"','value':'"+t.getModelId()+"'}"); 
  15.                 }else{ 
  16.                     sb.append(",{'name':'"+t.getModelName()+"','value':'"+t.getModelId()+"'}"); 
  17.                 } 
  18.             } 
  19.             sb.append("]"); 
  20.             System.out.println(sb.toString()); 
  21.             response().getWriter().write(sb.toString()); 
  22. //          response().getWriter().write(str); 
  23.             response().getWriter().close();  
  24.         } catch (IOException e) { 
  25.             e.printStackTrace(); 
  26.         } 
  27.         return null; 
  28.     } 

 

推荐阅读：
  1. MVC实现下拉框联动的方法
  2. layui实现下拉框三级联动

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

多个联动下拉框 动

上一篇：zabbix存储oracle

下一篇：ZLMusic模仿百度音乐应用项目源码

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号