当前位置: 代码迷 >> Web前端 >> 省地县三级联动
  详细解决方案

省地县三级联动

热度:100   发布时间:2013-08-01 15:23:18.0
省市县三级联动

select级联菜单是通过解析xml完成的

?

<script type="text/javascript">	
	$(document).ready(function(){
    	$.ajax({
     		url : "${request.contextPath}/xml/address.xml",
     		success : function(xml) {
      		$(xml).find("province").each(function(){
       			var t = $(this).attr("name");  
        		$("#DropProvince").append(
         		"<option>" + t + "</option>");
       			});
       			
     		}
    	});
    
	   	//二级的菜单
	   	$("#DropProvince").change(
	    	function() {
	       		$("#sCity>option").remove();
	       		var pname = $("#DropProvince").val();
	       		$.ajax({
	        		url : "${request.contextPath}/xml/address.xml",
	        		success : function(xml){
	         			$(xml).find("province[name='" + pname+ "']>city").each(function(){
	           				var c = $(this).attr("name")
	           				$("#sCity").append("<option>"+ c + "</option>");
	         			});
	        		}
	       		});  
			}	
	    );
	    //三级的菜单  
	    $("#sCity").change(
	    	function() {
	    		$("#sAddress>option").remove();
	    		var pname1 = $("#sCity").val();
	       		$.ajax({
	        		url : "${request.contextPath}/xml/address.xml",
	        		success : function(xml) {
	         			$(xml).find("city[name='" + pname1+ "']>address").each(function(){
	         				var d = $(this).attr("name")
	            			$("#sAddress").append("<option>"+ d + "</option>");
	           			});
	        		}
	       		});
			}
	    );
 	});
</script>



<tr>
					<td align="center">省:        <select  id="DropProvince" name="province"><option>请选择</option></select></td>
				</tr>
<tr>
					<td align="center">市:        <select id="sCity" name="city"><option>请选择</option></select></td>
				</tr>
				<tr>
					<td align="center">区/县:        <select id="sAddress" name="address"><option>请选择</option></select></td>
				</tr>



  相关解决方案