初学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;

            }

        }

    }

省市级联.net的更多相关文章

  1. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  4. 全国省市级联数据sql语句 mysql版

    全国省市级联数据sql语句 mysql版 --省级 provincial create table provincial ( provincialID int, provincialName ), p ...

  5. thinkPHP中省市级联下拉列表

    公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...

  6. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

  7. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  8. Ajax异步刷新省市级联

    省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...

  9. jquery库和cityselect插 件的省市 级联

    /*$(function(){ $("#select_provice").citySelect({ prov:"北京", nodata:"none&q ...

随机推荐

  1. docker 服务升级

    使用docker大家一般都是微服务部署了.个人的经验是乖乖的用docker自己的注册发现机制. 创建一个overlay类型的network.把所有的微服务加入进去.就可以把service name当作 ...

  2. （转）nodejs中npm常用命令

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

  3. simple mail example for smtp debug

    vim /etc/mail.rc head /etc/rc.local | mail -s "test_email" pyz_sub1@mailtest.com

  4. Java内存区域与内存溢出异常

    Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”. Java将内存控制的权利交给了Java虚拟机,一旦出现内存泄露和溢出问题,如果不了解虚拟机是怎样使用内存的,那么排查错误将会成 ...

  5. Leetcode: Matchsticks to Square && Grammar: reverse an primative array

    Remember the story of Little Match Girl? By now, you know exactly what matchsticks the little match ...

  6. 前端forEach在Array、map、set中的使用

    数组: var s = ['a','b','c']; s.forEach(function(ele,index,array){ console.log(ele); }); Map: var map = ...

  7. windows---------------windows如何查看哪个应用占用了哪个端口的方法

    假如我们需要确定谁占用了我们的80端口在windows命令行窗口下执行:netstat -aon|findstr "80"TCP 127.0.0.1:80 0.0.0.0:0 LI ...

  8. 使用Struts 2防止表单重复提交

    用户重复提交表单在某些场合将会造成非常严重的后果.例如,在使用信用卡进行在线支付的时候,如果服务器的响应速度太慢,用户有可能会多次点击提交按钮,而这可能导致那张信用卡上的金额被消费了多次.因此,重复提 ...

  9. 学习IO流

    学习IO流,不得不提到的就是JavaIO流.流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接受端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由得控制文件, ...

  10. java线程（2016-4-7）

    Thread.yield()的调用是对线程调度器(Java线程机制的一部分,可以将CPU从一个线程转移到另一个线程)的一种建议,它在声明:"我已经执行完生命周期中最重要的部分了,此刻正是切换 ...