Jquery三级联动

最新推荐文章于 2023-11-16 15:26:59 发布

owplace

最新推荐文章于 2023-11-16 15:26:59 发布

阅读量165

点赞数

本文链接：https://blog.youkuaiyun.com/bafangcio/article/details/80531856

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<select id="province" οnchange="provinceSelect(this);"></select>
		<select id="city" οnchange="citySelect(this);"></select>
		<select id="region"></select>
	</body>
	<script type="text/javascript" src="js/Jquery2.1.4_baidu.js" ></script>
	<script>
		var list1=new Array(2);
		list1["湖北省"]=["武汉市","十堰市","黄石市"];
		list1["江西省"]=["南昌市","宜春市","新余市"];
		list1["江苏省"]=["南京市","无锡市","扬州市"];
		list1["湖北省"]["武汉市"]=["洪山区","江夏区"];
		list1["江西省"]["南昌市"]=["青山区","昌北区"];
		list1["江苏省"]["南京市"]=["这个区","那个区"];
		$(function(){
   			var pp='<option value="请选择省份">请选择省份</option>';
       		$("#province").append(pp);
        	for(var l in  list1){
            	$("#province").append('<option value="'+l+'">'+l+'</option>');
      		}
   		});
	   		function provinceSelect(p){
	        //清空城市和区域
	        $("#city").empty();
	        $("#region").empty();
	
	        var pp='<option value="请选择城市">请选择城市</option>';
	        $("#city").append(pp);
	        //获取省份名称
	        var pp=$(p).val();
	        //根据省份名称 遍历二维数组
	        for(var i=0;i<list1[pp].length;i++){
	            $("#city").append('<option value="'+list1[pp][i]+'">'+list1[pp][i]+'</option>');
	        }
	
	    }
	
	    function citySelect(c){
	        //清空区域
	        $("#region").empty();
	        //获取省份
	        var pp=$("#province").val();
	        //获取城市
	         var cc=$(c).val();
	     根据省份和城市名称 遍历三维数组
	        for(var i=0;i<list1[pp][cc].length;i++){
	            $("#region").append('<option value="'+list1[pp][cc][i]+'">'+list1[pp][cc][i]+'</option>');
	        }
	    }
	</script>
</html>