使用jQuery ajax一个省市级联的例子.

demo.jsp代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<title>jquery xml解析</title>
		<script type="text/javascript"
			src="/jQuery/jQuery/jquery-1.2.6.pack.js"></script>
		<script type="text/javascript">
	$(document).ready(
			function(){
				$.ajax( {
					url : "xx.xml",
					success : function(xml) {
						$(xml).find("province").each(function() {
							var t = $(this).attr("name");//this->   
								$("#DropProvince").append("<option>" + t + "</option>");
						});
					}
				});
			$("#DropProvince").change(
					function() {
						$("#sCity>option").remove();
						var pname = $("#DropProvince").val();
						$.ajax({
							url:"xx.xml",
							success : function(xml) {
							$(xml).find(
							"province[name='" + pname+ "']>city").each(
								function() {
									$("#sCity").append(
										"<option>"+ $(this).text()+"</option>");});
							}
						});
					});
			});
</script>
	</head>
	<body>
		<form id="form1">
			<div>
				<select id="DropProvince" style="width: 60px;">
					<option>
						请选择
					</option>
				</select>
				<select id="sCity" style="width: 60px;">
				</select>
			</div>
		</form>
	</body>
</html>

 

 

xx.xml里面的代码:

<?xml version="1.0" encoding="utf-8" ?>  
<provinces>  
	<province name="湖北">  
		<city>武汉</city>  
		<city>黄石</city>  
		<city>宜昌</city>  
		<city>天门</city>  
	</province>  
	<province name="湖南">  
		<city>邵阳</city>  
		<city>长沙</city>  
		<city>株洲</city>  
	</province>  
	<province name="广东">  
		<city>广州</city>  
		<city>深圳</city>  
	</province>  
</provinces>

 

 

使用jQuery 解析xml文档.. 这例题非常实用.. 感谢网友提供的源代码.

你可能感兴趣的:(JavaScript,jquery,jsp,Ajax,xml)