关闭

ajax省市级联

301人阅读 评论(1) 收藏 举报

    在省市级联中 因为省市的信息 大多数情况是不会改变的所以不用保存在数据库里面,可以将其写入到一个js的文件里面(JSON格式)

 

  如下:

{"cityData":[
       { "name": "北京", "cities": ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"] },
          { "name": "天津", "cities": ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"] },
          { "name": "河北", "cities": ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"] },
          { "name": "山西", "cities": ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"] },
          { "name": "内蒙古自治区", "cities": ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"] },
          { "name": "辽宁", "cities": ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] },
          { "name": "吉林", "cities": ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"] },
          { "name": "黑龙江", "cities": ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"] },
          { "name": "上海", "cities": ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"] },
          { "name": "江苏", "cities": ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"] },
          { "name": "浙江", "cities": ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"] },
          { "name": "安徽", "cities": ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"] },
          { "name": "福建", "cities": ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"] },
          { "name": "江西", "cities": ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"] },
          { "name": "山东", "cities": ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"] },
          { "name": "河南", "cities": ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"] },
          { "name": "湖北", "cities": ["武汉", "襄阳", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "荆门", "随州", "咸宁","神农架"] },
          { "name": "湖南", "cities": ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"] },
          { "name": "广东", "cities": ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"] },
          { "name": "广西壮族自治区", "cities": ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"] },
          { "name": "海南", "cities": ["海口", "三亚"] },
          { "name": "重庆", "cities": ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"] },
          { "name": "四川", "cities": ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"] },
          { "name": "贵州", "cities": ["贵阳", "遵义", "安顺", "黔西南", "都匀"] },
          { "name": "云南", "cities": ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"] },
          { "name": "西藏自治区", "cities": ["拉萨", "林芝", "日喀则", "昌都"] },
          { "name": "陕西", "cities": ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"] },
          { "name": "甘肃", "cities": ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"] },
          { "name": "青海", "cities": ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"] },
          { "name": "宁夏回族自治区", "cities": ["银川", "吴忠"] },
          { "name": "新疆维吾尔自治区", "cities": ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"] },
          { "name": "香港", "cities": ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"] },
          { "name": "澳门", "cities": ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区"]}
   ]
}

然后再通过jquery的一个解析包jquery-1.8.3.min.js文件里面的 .getJSON(url,function(data){})(url 就可以是上面的js文件)

具体的代码为

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	
	$(function(){
	    $.getJSON("js/cityData.js",function(data){
	     	    //  alert("后台返回数据的类型:"+typeof(data)); 
	     	    //给省的下拉框填充数据
	     	    var dataArray=   data.cityData;
	     	    $("#province").append("<option value='-1'>--请选择--</option>");
	     	        $("#city").append("<option value='-1'>--请选择--</option>");
	     	    for(var i=0;i<dataArray.length;i++){
	     	        //动态添加option
	     	       $("#province").append("<option value='"+i+"'>"+dataArray[i].name+"</option>");
	     	    }
	     	    //省的下拉框选项值发生改变时触发onchange事件
	          $("#province").change(function(){
	               //清空城市下拉框的原本的信息
	               $("#city").empty();
	               if(this.value=="-1"){
	                    $("#city").append("<option value='-1'>--请选择--</option>");
	               }
	              // 得到各个省的城市的数组
	             var cityArray=    dataArray[this.value].cities;
	               for(var i=0;i<cityArray.length;i++){
	     	        //动态添加option
	     	       $("#city").append("<option value='"+i+"'>"+cityArray[i]+"</option>");
	     	    }
	             
	          });   

	  });
	});
	 
	</script>
  </head>
  
  <body> 
  <h3>全国省市级联</h3>
  省/直辖市/自治区:<select id="province"></select>
 市:<select id="city"></select>
  </body>
</html>



 

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2126次
    • 积分:79
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论