JQuery应用案例--JQuery-MySql版：城市省份区域-三级联动

来源：互联网发布：下载wibox软件编辑：程序博客网时间：2024/05/12 07:32

原：AJAX应用案例--基于mysql，以POST方式，完成三级级下拉联动【省份-城市-区域】

现改为JQuery版的三级联动，只需改动JSP页面代码，使用JQuery使得代码大大简化。

代码：

<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script type="text/javascript" src="jquery-2.0.3.js"></script></head>  <body>  <select id="provinceID">  <option>请选择省份</option>  <option value="1">广东</option>  <option value="2">湖南</option>  </select>  <select id="cityID">  <option>请选择城市</option>  </select>  <select id="areaID">  <option>请选择区域</option>  </select>  <script type="text/javascript">  $("#provinceID").change(function(){  //当改变省份时需先清空城市列表和区域列表  $("#cityID option:not(:first)").remove();  $("#areaID option:not(:first)").remove();    var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();  var provinceID =  $("#provinceID option:selected").val();  var sendData = {"method":"provinceToCity","provinceID":provinceID};  //使用post方式提交数据  $.post(url,sendData,function(backData){  var json = eval("("+backData+")");  for(var i=0; i<json.length; i++){  $("#cityID").append($("<option value="+json[i].id+">"+json[i].name+"</option>"));  }  });  });    $("#cityID").change(function(){  //当改变城市列表和需先清空区域列表  $("#areaID option:not(:first)").remove();    var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();  var cid =  $("#cityID option:selected").val();  var sendData = {"method":"cityToArea","cid":cid};  //使用post方式提交数据  $.post(url,sendData,function(backData){  var json = eval("("+backData+")");  for(var i=0; i<json.length; i++){  $("#areaID").append($("<option>"+json[i].name+"</option>"));  }  });  });    </script>        </body></html>