Ajax代码:
<script type="text/javascript">
//根据选择的汽车品牌来自动填充汽车型号的下拉列表
function getSerie(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var carSerie = document.getElementById("carSerie");
var serieIdAndName = xhr.responseText;
var series = serieIdAndName.split(",");
clearSelect("carSerie");
for(var i = 0;i<series.length-1;i=i+2){
carSerie.options[carSerie.length]=new Option(series[i+1],series[i]);
}
}
}
xhr.open("GET","${pageContext.request.contextPath}/servlet/AllCarServlet?brandId="+document.getElementById("carBand").value,true);
xhr.send();
}
//根据选择的汽车系列来填充车型的下拉列表
function getModel(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var carModel = document.getElementById("carModel");
var modelIdAndName = xhr.responseText;
var models = modelIdAndName.split(",");
clearSelect("carModel");
for(var i = 0;i<models.length-1;i=i+2){
carModel.options[carModel.length]=new Option(models[i+1],models[i]);
}
}
}
xhr.open("GET","${pageContext.request.contextPath}/servlet/AllCarServlet?serieId="+document.getElementById("carSerie").value,true);
xhr.send();
}
//清空下拉列表
function clearSelect(id){
var select = document.getElementById(id);
select.options.length = 0;
select.options[0] = new Option("--请选择车系--","0");
var select = document.getElementById("carModel");
select.options.length = 0;
select.options[0] = new Option("--请选择车型--","0");
}
$(function(){
$("#submit").click(function(){
var mId = $("#carModel").val();
window.location.href="${pageContext.request.contextPath}/servlet/ShowCarModelDetailServlet?id="+mId;
});
});
</script>
html代码:
<select id="carBand" onchange="getSerie()">
<option value="0">--请选择汽车品牌--</option>
<c:forEach items="${list }" var="carBand">
<option value="${carBand.id }">${carBand.name }</option>
</c:forEach>
</select>
<select id="carSerie" onchange="getModel()">
<option value="0">--请选择汽车系列--</option>
</select>
<select id="carModel">
<option value="0">--请选择汽车型号--</option>
</select>
<button id="submit">确定</button>
后台用servlet的话,获取参数用request.getParamter("参数名")就能获得参数值了