http://inmethetiger.iteye.com/blog/1708764
首先,这些代码单独抽出来没有实际意义。因为这个与jsp页面有所联系。而且与数据库的结构也有很大的关系。而写这个的原因是,前台用js写的。大约总共写下来差不多有500行左右。我就用jquery重写了一下。因为是重写,所以在jsp页面上就没有优化。只是将一些事件取消。所以,代码现在看起来也并不是很合理。如果修改jsp页面的话应该可以更简单。
其次,以前就看过jquery,也写过一些小例子,但是因为没有在项目中使用的原因,记忆并不是很清晰。这几天在项目中试了一下发现记忆起来了不少。所以,抽空会写一些有关jquery的博客。不保证原创,只是为了总结。
下面是代码,基本完成了省市县的切换。代码备注比较详细。不过借鉴作用不大。
/** * 用jquery 改写的前台 lyy 2012-10-26 */ $().ready(function() { // 点击更换区域 $("#changeArea").on("click", function() { // 切换区域div显示 $("#qiehuan").css("display", "block"); $("#showlist l").remove(".list"); $("#shengming,#shiming,#xianming").empty(); // 发送ajax请求得到所有的省 $.showSCX($("#shengming").val(), "#shengming", "sdm"); // 下面三个应该可以抽象出来 $("#guoming").on("click", function() { $("#shengming").empty(); $.showSCX($("#guoming").val(), "#shengming", "sdm"); }); // 点击省名,下面展示该省的市名,原有的市名和县名消除 $("#shengming").on("click", function() { $("#shiming,#xianming").empty(); $.showSCX($("#shengming").attr("sdm"), "#shiming", "cdm"); }); // 点击市名,下面展示该市的县名,原有的县名消除 $("#shiming").on("click", function() { $("#xianming").empty(); $.showSCX($("#shiming").attr("cdm"), "#xianming", "xdm"); }); }); // 关闭城市 $("#closeCityName").on("click", function() { $("#qiehuan").css("display", "none"); }); // 点解确定,发送ajax请求 $("#submitButton").on("click", function() { $.ajax({ type : "POST", url : "showJson.do?SDM=" + $("#shengming").attr("sdm") + "&CDM=" + $("#shiming").attr("cdm") + "&XDM=" + $("#xianming").attr("xdm") + "", dataType : "json", success : function(dataObj) { // 解析返回数据 } }); }); // 显示省市县三级 $.extend({ showSCX : function(param, id, att) { $.ajax({ type : "POST", url : "show.do?param=" + param, dataType : "json", success : function(dataObj) { $("#showlist").empty(); $(dataObj.data).each(function(index, cnty) { $("#showlist").append("<li class='list' id=" + cnty.ccode + ">" + cnty.cnam + "</li>"); // 绑定下级的事件 $("#" + cnty.ccode).on("click", function() { $(id).css("display", "block"); // 先将省名清除 $(id).empty(); // 然后赋值 $(id) .attr(att, cnty.ccode) .append(cnty.cnam + "<img src='images/sys/arrow.png'/>"); $param = cnty.ccode; // 然后得到市 if (cnty.ccode.length == 2) { $.showSCX($param, "#shiming", "cdm"); } if (cnty.ccode.length == 4) { $.showSCX($param, "#xianming", "xdm"); } }); }); } }); } }); });