Ajax实现三级联动

来源:互联网 发布:哪个挂号软件好用抢号 编辑:程序博客网 时间:2024/04/30 11:03

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("参数名")就能获得参数值了

0 0
原创粉丝点击