省市级联.net

初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>json</title> 
<script language="javascript" type="text/javascript"> 
<!--
    var provincelist;
    function getarea() {
        var xmlhttp;
        var _province = document.getElementById("province");
        var msg = document.getElementById("province").value;

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                 provincelist = eval("(" + xmlhttp.responseText + ")");


                for (var p in provincelist.Area) {
                    var opt_1 = new Option(provincelist.Area[p].name, provincelist.Area[p].id);
                    _province.add(opt_1);
                }

            }
        }
            xmlhttp.open("GET", "Handler1.ashx?q=" + msg, true);
            xmlhttp.send();
        }


        function tocity() {
            var _province = document.getElementById("province");
            var _city = document.getElementById("city");
            var _region = document.getElementById("region");
            

            var v_province = _province.value;

            _city.options.length = 1;
            _region.options.length = 1;


            for (var p in provincelist.Area) {
                if (provincelist.Area[p].id == v_province) {
                    for (var e in provincelist.Area[p].city) {
                        var opt_2 = new Option( provincelist.Area[p].city[e].name,provincelist.Area[p].city[e].id);
                        _city.add(opt_2);

                    }
                    break;
                }
            }
        }


       function toregion() {
            var _province = document.getElementById("province");
            var _city = document.getElementById("city");
            var _region = document.getElementById("region");

            var v_province = _province.value;
            var v_city = _city.value;


            //_province.options.length=1; 
            _region.options.length = 1;



            for (var p in provincelist.Area) {
                if (provincelist.Area[p].id == v_province) {
                    for (var e in provincelist.Area[p].city) {
                        //alert(place_list[e].province[p].value); 
                        if (provincelist.Area[p].city[e].id == v_city) {
                            // alert(place_list[e].province[p].value); 
                            //document.getElementById("Label3").innerHTML = v_province;
                            for (var k in provincelist.Area[p].city[e].region) {
                                var opt_3 = new Option(provincelist.Area[p].city[e].region[k].name, provincelist.Area[p].city[e].region[k].id);
                                _region.add(opt_3);
                            }
                            // document.getElementById("Label5").innerHTML = v_city ;
                            return;
                        }


                    }
                    break;
                }
            }

        } 


//--> 
</script> 
</head> 

<body onload="getarea();"> 
<select id="province"  onchange="tocity();"> 
<option value="-1">--请选择国家---</option> 
</select> 
<select id="city" onchange="toregion();" > 
<option value="-1">--请选择省份---</option> 
</select> 
<select id="region" > 
<option value="-1">--请选择市区---</option> 
</select> 

 


    
</body> 
</html> 
  /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {
        //public DataSet sqldataset = new DataSet(); 
        public void ProcessRequest(HttpContext context)
        {
            
             string provincelist = "{\"Area\":[{\"id\": \"350000\", \"name\": \"福建\", \"city\": "
     +"["
     +"{ \"id\": \"350100\", \"name\": \"福州市\", \"region\":"
     +"["
     +"{ \"id\": \"350102\", \"name\": \"鼓楼区\" }, "
     +"{ \"id\": \"350182\", \"name\": \"长乐市\"}"
     +"]"
     +"},"
     +"{ \"id\": \"350200\", \"name\": \"厦门市\", \"region\":"
     +"[{ \"id\": \"350203\", \"name\": \"思明区\" },"
     +"{ \"id\": \"350212\", \"name\": \"同安区\"}"
     +"]"
     +"}, "
     +"{ \"id\": \"350300\", \"name\": \"莆田市\", \"region\":"
     +"[{ \"id\": \"350302\", \"name\": \"城厢区\" },"
     +"{ \"id\": \"350322\", \"name\": \"仙游县\" }"
     +"]"
     +"},"
     +"{ \"id\": \"350400\", \"name\": \"三明市\", \"region\": "
     +"[{ \"id\": \"350402\", \"name\": \"梅列区\" },"
     +"{ \"id\": \"350403\", \"name\": \"三元区\" }"
     +"]"
     +"}, "
     +"{ \"id\": \"350500\", \"name\": \"泉州市\", \"region\":"
     +"[{ \"id\": \"350502\", \"name\": \"鲤城区\" },"
     +"{ \"id\": \"350503\", \"name\": \"丰泽区\" }"
     +"]"
     +"},"
     +"{ \"id\": \"350600\", \"name\": \"漳州市\", \"region\": "
     +"[{ \"id\": \"350602\", \"name\": \"芗城区\" },"
     +"{ \"id\": \"350603\", \"name\": \"龙文区\" }"
     +"]"
     +"},"
     +"{ \"id\": \"350700\", \"name\": \"南平市\", \"region\":"
     +"[{ \"id\": \"350702\", \"name\": \"延平区\" },"
     +"{ \"id\": \"350721\", \"name\": \"顺昌县\" }"
     +"]"
     +"},"
     +"{ \"id\": \"350900\", \"name\": \"宁德市\", \"region\": "
     +"[{ \"id\": \"350902\", \"name\": \"蕉城区\" },"
     +"{ \"id\": \"350921\", \"name\": \"霞浦县\" }"
     +" ]"
     +" }"
     +" ]"
     +" },"
     +"{ \"id\": \"360000\", \"name\": \"江西\", \"city\": "
     +"["
     +"{ \"id\": \"360100\", \"name\": \"南昌市\", \"region\": "
     +"[ { \"id\": \"360102\", \"name\": \"东湖区\" },"
     +"{ \"id\": \"360103\", \"name\": \"西湖区\"}"
     +" ]"
     +"},"
     +"{ \"id\": \"360200\", \"name\": \"景德镇市\", \"region\": "
     +"[{ \"id\": \"360202\", \"name\": \"昌江区\" },"
     +"{ \"id\": \"360203\", \"name\": \"珠山区\"}"
     +"]"
     +"},"
     +"{ \"id\": \"360300\", \"name\": \"萍乡市\", \"region\":"
     +" ["
     +" { \"id\": \"360302\", \"name\": \"安源区\" },"
     +"{\"id\":\"360313\",\"name\":\"湘东区\"}"
     +" ]"
     +"},"
     +"{\"id\":\"360400\",\"name\":\"九江市\",\"region\":"
     +"[{\"id\":\"360402\",\"name\":\"庐山区\"},"
     +" {\"id\":\"360403\",\"name\":\"浔阳区\"}"
     +"]"
     +" },"
     +" {\"id\":\"360500\",\"name\":\"新余市\",\"region\":"
     +" [{\"id\":\"360502\",\"name\":\"渝水区\"},"
     +" {\"id\":\"360521\",\"name\":\"分宜县\"}"
     +" ]"
     +"},"
     +"{\"id\":\"360600\",\"name\":\"鹰潭市\",\"region\":"
     +"[ {\"id\":\"360602\",\"name\":\"月湖区\"},"
     +" {\"id\":\"360622\",\"name\":\"余江县\"}"
     +" ]"
     +" },"
     +"{\"id\":\"360700\",\"name\":\"赣州市\",\"region\":"
     +"[{\"id\":\"360702\",\"name\":\"章贡区\"},"
     +" {\"id\":\"360721\",\"name\":\"赣县\"}"
     +" ]"
     +"},"
     +" {\"id\":\"360800\",\"name\":\"吉安市\",\"region\":"
     +"[{\"id\":\"360802\",\"name\":\"吉州区\"},"
     +"{\"id\":\"360803\",\"name\":\"青原区\"}"
     +" ]"
     +"},"
     +"{\"id\":\"360900\",\"name\":\"宜春市\",\"region\":"
     +"[{\"id\":\"360902\",\"name\":\"袁州区\"},"
     +"{\"id\":\"360921\",\"name\":\"奉新县\"}"
     +"]"
     +"},"
     +"{\"id\":\"361000\",\"name\":\"抚州地区\",\"region\":"
     +"[{\"id\":\"361002\",\"name\":\"临川区\"},"
     +"{\"id\":\"361021\",\"name\":\"南城县\"}"
     +"]"
     +"},"
     +" {\"id\":\"361100\",\"name\":\"上饶市\",\"region\":"
     +" [{\"id\":\"361102\",\"name\":\"信州区\"},"
     +"{\"id\":\"361121\",\"name\":\"上饶县\"}"
     +"]"
     +" }"
     +"]"
     + "}]}";
             context.Response.ContentType = "text/plain";
             context.Response.Write(provincelist);
                 
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
       
       
         
       
    }

 

posted @ 2015-05-13 19:39  fzyong  阅读(224)  评论(0编辑  收藏  举报