189 8069 5689

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

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

站在用户的角度思考问题，与客户深入沟通，找到陇西网站设计与陇西网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟主机、企业邮箱。业务覆盖陇西地区。

选择前如下:

如何写动态的联动下拉框,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.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16. 商家 
  17. /css/class.css" rel="stylesheet" type="text/css"> 
  18.  
  19.  
  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
  140.         if (carBrand.options[i].value == str)       {     
  141.             carBrand.options[i].selected=true; 
  142.             break; 
  143.         }        
  144.     }  
  145.     refreshCarBrand(str); 
  146. } 
  147.  
  148.  
  149.  
  150.  
  151.         
  152.        
  153.         /p_w_picpaths/main/main01.jpg" width="26" height="15"> 
  154.         当前位置： 
  155.          报价>  新增报价
 
  •        
  •      
  •      
  •          
  •           /p_w_picpaths/main/main02.gif">/p_w_picpaths/main/main02.gif" width="6" height="4"> 
  •          
  •        
  •  
  •  
  •      
  •         选择商家： 
  •          
  •              
  •             * 
  •          
  •      
  •      
  •         选择品牌： 
  •          
  •                         
  •             *一级/二级品牌,品牌在商家添加的时候已经关联 
  •          
  •      
  •      
  •         选择车型： 
  •          
  •              
  •             * 
  •          
  •      
  •      
  •         选择具体车型： 
  •          
  •              
  •             * 
  •          
  •      
  •      
  •         汽车报价： 
  •          
  •              
  •             万* 
  •          
  •      
  •      
  •         有效期： 
  •          
  •             至  
  •                           
  •             * 
  •          
  •      
  •      
  •          
  •          
  •           
  •          
  •          
  •      
  •  
  •  
  •  
  •  

    • 后台代码如下:

     

    1. public void setCarBasic(String[] idArray){ 
    2.     List list = testService.getCarDetail(idArray[0]); 
    3.     tbCarBasicList = new ArrayList(); 
    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 list = testService.getCarModels(carBrand); 
    10.             sb.append("["); 
    11.             for(int i=0;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 list = testService.getCarDetail(carId); 
    10.             sb.append("["); 
    11.             for(int i=0;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.     } 

     


    名称栏目：如何写动态的联动下拉框,4联动下拉框
    链接分享：http://cdxtjz.cn/article/ieojos.html

    其他资讯