jquery实现省市县三级级联

最新推荐文章于 2020-01-06 13:12:06 发布

最新推荐文章于 2020-01-06 13:12:06 发布 · 231 阅读

文章标签：

#jquery #ViewUI

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现省市县三级联动选择的功能。通过点击事件触发AJAX请求获取相应级别的行政区划数据，并动态更新页面选项。代码详细注释便于理解。

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");
									}

								});
							});
						}
					});
		}
	});
});