今天項(xiàng)目中用到了聯(lián)動(dòng)的下拉框，這個(gè)是經(jīng)常用的小技巧，就記錄了下來(lái)，界面如下。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到隴西網(wǎng)站設(shè)計(jì)與隴西網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋隴西地區(qū)。

選擇前如下:

選擇中:

選擇后下拉框都是聯(lián)動(dòng)的，4個(gè)聯(lián)動(dòng)下拉框:

jsp頁(yè)面代碼如下:

<%@ 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); 
%> 
 
 
 
 
 
 
 
 
/css/class.css" rel="stylesheet" type="text/css"> 
 
 
function checkFile() 
{  
    //獲得選擇的文件的URL 
    var fileURL = document.forms1.logoUplode.value; 
    //獲得文件的擴(kuò)展名 
    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("請(qǐng)選擇圖片文件"); 
        return false; 
    } 
}    
function onValidate() { 
    //提交保存 
    //驗(yàn)證 
    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 = "請(qǐng)選擇商家！"; 
        return false; 
    } 
    if(modelId==""){ 
        document.getElementById("message").innerHTML = "請(qǐng)選擇車(chē)型！"; 
        return false; 
    } 
    if(modelId2==""){ 
        document.getElementById("message").innerHTML = "請(qǐng)選擇具體車(chē)型,如果沒(méi)有具體車(chē)型請(qǐng)?jiān)谲?chē)型管理中添加"; 
        return false; 
    } 
    if(trim(document.getElementById("tbDealerSales.salesPrice").value)=="") { 
        document.getElementById("message").innerHTML = "報(bào)價(jià)不能為空！"; 
        return false; 
    } 
    if(trim(document.getElementById("validStime").value)=="") { 
        document.getElementById("message").innerHTML = "開(kāi)始日期不能為空！"; 
        return false; 
    } 
     if(trim(document.getElementById("validEtime").value)=="") { 
        document.getElementById("message").innerHTML = "結(jié)束日期不能為空！"; 
        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("--暫無(wú)數(shù)據(jù)--",""); 
        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("--暫無(wú)數(shù)據(jù)--",""); 
    } 
} 
 
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
        if (carBrand.options[i].value == str)       {     
            carBrand.options[i].selected=true; 
            break; 
        }        
    }  
    refreshCarBrand(str); 
} 
 
 
 
 
        
       
        /p_w_picpaths/main/main01.jpg" width="26" height="15"> 
        當(dāng)前位置： 
         報(bào)價(jià)>  新增報(bào)價(jià)