如何写动态的联动下拉框,4联动下拉框-web开发-互联网-天达云

如何写动态的联动下拉框,4联动下拉框
更新：HHH 时间：2023-1-7

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

选择前如下:

选择中:

选择后下拉框都是联动的，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"> 报价&gt;  <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; 
    }


返回web开发教程...

新手上路

产品管理

支付方式

关于我们