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

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>json</title>
  4. <script language="javascript" type="text/javascript">
  5. <!--
  6.     var provincelist;
  7.     function getarea() {
  8.         var xmlhttp;
  9.         var _province = document.getElementById("province");
  10.         var msg = document.getElementById("province").value;
  11.  
  12.         if (window.XMLHttpRequest) {
  13.             xmlhttp = new XMLHttpRequest();
  14.         }
  15.         else {
  16.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  17.         }
  18.         xmlhttp.onreadystatechange = function () {
  19.             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  20.                  provincelist = eval("(" + xmlhttp.responseText + ")");
  21.  
  22.                 for (var p in provincelist.Area) {
  23.                     var opt_1 = new Option(provincelist.Area[p].name, provincelist.Area[p].id);
  24.                     _province.add(opt_1);
  25.                 }
  26.  
  27.             }
  28.         }
  29.             xmlhttp.open("GET", "Handler1.ashx?q=" + msg, true);
  30.             xmlhttp.send();
  31.         }
  32.  
  33.         function tocity() {
  34.             var _province = document.getElementById("province");
  35.             var _city = document.getElementById("city");
  36.             var _region = document.getElementById("region");
  37.  
  38.             var v_province = _province.value;
  39.  
  40.             _city.options.length = 1;
  41.             _region.options.length = 1;
  42.  
  43.             for (var p in provincelist.Area) {
  44.                 if (provincelist.Area[p].id == v_province) {
  45.                     for (var e in provincelist.Area[p].city) {
  46.                         var opt_2 = new Option( provincelist.Area[p].city[e].name,provincelist.Area[p].city[e].id);
  47.                         _city.add(opt_2);
  48.  
  49.                     }
  50.                     break;
  51.                 }
  52.             }
  53.         }
  54.  
  55.        function toregion() {
  56.             var _province = document.getElementById("province");
  57.             var _city = document.getElementById("city");
  58.             var _region = document.getElementById("region");
  59.  
  60.             var v_province = _province.value;
  61.             var v_city = _city.value;
  62.  
  63.             //_province.options.length=1;
  64.             _region.options.length = 1;
  65.  
  66.             for (var p in provincelist.Area) {
  67.                 if (provincelist.Area[p].id == v_province) {
  68.                     for (var e in provincelist.Area[p].city) {
  69.                         //alert(place_list[e].province[p].value);
  70.                         if (provincelist.Area[p].city[e].id == v_city) {
  71.                             // alert(place_list[e].province[p].value);
  72.                             //document.getElementById("Label3").innerHTML = v_province;
  73.                             for (var k in provincelist.Area[p].city[e].region) {
  74.                                 var opt_3 = new Option(provincelist.Area[p].city[e].region[k].name, provincelist.Area[p].city[e].region[k].id);
  75.                                 _region.add(opt_3);
  76.                             }
  77.                             // document.getElementById("Label5").innerHTML = v_city ;
  78.                             return;
  79.                         }
  80.  
  81.                     }
  82.                     break;
  83.                 }
  84.             }
  85.  
  86.         } 
  87.  
  88. //-->
  89. </script>
  90. </head> 
  91.  
  92. <body onload="getarea();">
  93. <select id="province"  onchange="tocity();">
  94. <option value="-1">--请选择国家---</option>
  95. </select>
  96. <select id="city" onchange="toregion();" >
  97. <option value="-1">--请选择省份---</option>
  98. </select>
  99. <select id="region" >
  100. <option value="-1">--请选择市区---</option>
  101. </select> 
  102.  
  103. </body>
  104. </html> 
  1.   /// <summary>
  2.     /// Handler1 的摘要说明
  3.     /// </summary>
  4.     public class Handler1 : IHttpHandler
  5.     {
  6.         //public DataSet sqldataset = new DataSet();
  7.         public void ProcessRequest(HttpContext context)
  8.         {
  9.  
  10.              string provincelist = "{\"Area\":[{\"id\": \"350000\", \"name\": \"福建\", \"city\": "
  11.      +"["
  12.      +"{ \"id\": \"350100\", \"name\": \"福州市\", \"region\":"
  13.      +"["
  14.      +"{ \"id\": \"350102\", \"name\": \"鼓楼区\" }, "
  15.      +"{ \"id\": \"350182\", \"name\": \"长乐市\"}"
  16.      +"]"
  17.      +"},"
  18.      +"{ \"id\": \"350200\", \"name\": \"厦门市\", \"region\":"
  19.      +"[{ \"id\": \"350203\", \"name\": \"思明区\" },"
  20.      +"{ \"id\": \"350212\", \"name\": \"同安区\"}"
  21.      +"]"
  22.      +"}, "
  23.      +"{ \"id\": \"350300\", \"name\": \"莆田市\", \"region\":"
  24.      +"[{ \"id\": \"350302\", \"name\": \"城厢区\" },"
  25.      +"{ \"id\": \"350322\", \"name\": \"仙游县\" }"
  26.      +"]"
  27.      +"},"
  28.      +"{ \"id\": \"350400\", \"name\": \"三明市\", \"region\": "
  29.      +"[{ \"id\": \"350402\", \"name\": \"梅列区\" },"
  30.      +"{ \"id\": \"350403\", \"name\": \"三元区\" }"
  31.      +"]"
  32.      +"}, "
  33.      +"{ \"id\": \"350500\", \"name\": \"泉州市\", \"region\":"
  34.      +"[{ \"id\": \"350502\", \"name\": \"鲤城区\" },"
  35.      +"{ \"id\": \"350503\", \"name\": \"丰泽区\" }"
  36.      +"]"
  37.      +"},"
  38.      +"{ \"id\": \"350600\", \"name\": \"漳州市\", \"region\": "
  39.      +"[{ \"id\": \"350602\", \"name\": \"芗城区\" },"
  40.      +"{ \"id\": \"350603\", \"name\": \"龙文区\" }"
  41.      +"]"
  42.      +"},"
  43.      +"{ \"id\": \"350700\", \"name\": \"南平市\", \"region\":"
  44.      +"[{ \"id\": \"350702\", \"name\": \"延平区\" },"
  45.      +"{ \"id\": \"350721\", \"name\": \"顺昌县\" }"
  46.      +"]"
  47.      +"},"
  48.      +"{ \"id\": \"350900\", \"name\": \"宁德市\", \"region\": "
  49.      +"[{ \"id\": \"350902\", \"name\": \"蕉城区\" },"
  50.      +"{ \"id\": \"350921\", \"name\": \"霞浦县\" }"
  51.      +" ]"
  52.      +" }"
  53.      +" ]"
  54.      +" },"
  55.      +"{ \"id\": \"360000\", \"name\": \"江西\", \"city\": "
  56.      +"["
  57.      +"{ \"id\": \"360100\", \"name\": \"南昌市\", \"region\": "
  58.      +"[ { \"id\": \"360102\", \"name\": \"东湖区\" },"
  59.      +"{ \"id\": \"360103\", \"name\": \"西湖区\"}"
  60.      +" ]"
  61.      +"},"
  62.      +"{ \"id\": \"360200\", \"name\": \"景德镇市\", \"region\": "
  63.      +"[{ \"id\": \"360202\", \"name\": \"昌江区\" },"
  64.      +"{ \"id\": \"360203\", \"name\": \"珠山区\"}"
  65.      +"]"
  66.      +"},"
  67.      +"{ \"id\": \"360300\", \"name\": \"萍乡市\", \"region\":"
  68.      +" ["
  69.      +" { \"id\": \"360302\", \"name\": \"安源区\" },"
  70.      +"{\"id\":\"360313\",\"name\":\"湘东区\"}"
  71.      +" ]"
  72.      +"},"
  73.      +"{\"id\":\"360400\",\"name\":\"九江市\",\"region\":"
  74.      +"[{\"id\":\"360402\",\"name\":\"庐山区\"},"
  75.      +" {\"id\":\"360403\",\"name\":\"浔阳区\"}"
  76.      +"]"
  77.      +" },"
  78.      +" {\"id\":\"360500\",\"name\":\"新余市\",\"region\":"
  79.      +" [{\"id\":\"360502\",\"name\":\"渝水区\"},"
  80.      +" {\"id\":\"360521\",\"name\":\"分宜县\"}"
  81.      +" ]"
  82.      +"},"
  83.      +"{\"id\":\"360600\",\"name\":\"鹰潭市\",\"region\":"
  84.      +"[ {\"id\":\"360602\",\"name\":\"月湖区\"},"
  85.      +" {\"id\":\"360622\",\"name\":\"余江县\"}"
  86.      +" ]"
  87.      +" },"
  88.      +"{\"id\":\"360700\",\"name\":\"赣州市\",\"region\":"
  89.      +"[{\"id\":\"360702\",\"name\":\"章贡区\"},"
  90.      +" {\"id\":\"360721\",\"name\":\"赣县\"}"
  91.      +" ]"
  92.      +"},"
  93.      +" {\"id\":\"360800\",\"name\":\"吉安市\",\"region\":"
  94.      +"[{\"id\":\"360802\",\"name\":\"吉州区\"},"
  95.      +"{\"id\":\"360803\",\"name\":\"青原区\"}"
  96.      +" ]"
  97.      +"},"
  98.      +"{\"id\":\"360900\",\"name\":\"宜春市\",\"region\":"
  99.      +"[{\"id\":\"360902\",\"name\":\"袁州区\"},"
  100.      +"{\"id\":\"360921\",\"name\":\"奉新县\"}"
  101.      +"]"
  102.      +"},"
  103.      +"{\"id\":\"361000\",\"name\":\"抚州地区\",\"region\":"
  104.      +"[{\"id\":\"361002\",\"name\":\"临川区\"},"
  105.      +"{\"id\":\"361021\",\"name\":\"南城县\"}"
  106.      +"]"
  107.      +"},"
  108.      +" {\"id\":\"361100\",\"name\":\"上饶市\",\"region\":"
  109.      +" [{\"id\":\"361102\",\"name\":\"信州区\"},"
  110.      +"{\"id\":\"361121\",\"name\":\"上饶县\"}"
  111.      +"]"
  112.      +" }"
  113.      +"]"
  114.      + "}]}";
  115.              context.Response.ContentType = "text/plain";
  116.              context.Response.Write(provincelist);
  117.  
  118.         }
  119.  
  120.         public bool IsReusable
  121.         {
  122.             get
  123.             {
  124.                 return false;
  125.             }
  126.         }
  127.  
  128.     }

省市级联.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. spark shell

    启动spark-shell客户端 启动集群模式 本机为master节点 export MASTER=spark://`hostname`:7077bin/spark-shell 或者 bin/spar ...

  2. 使用HTTPS网站搭建iOS应用内测网站(OTA分发iOS应用)

    为什么要搭建应用内测网站呢? 1.AppStore的审核速度比较慢,万一被拒,还得等,而且一旦发布,任何人都可以下载,而有些时候只有老板想知道最新的修改是否符合要求,万一不符合要求呢?又要修改了. 2 ...

  3. Webform Application、ViewState

    Application(全局对象) Application对象生存期和Web应用程序生存期一样长,生存期从Web应用程序网页被访问开始,HttpApplication类对象Application被自动 ...

  4. swift基础：第六部分：类与对象

    http://reactnative.cn/docs/0.24/getting-started.html#content(react Native 开发文档) 互联网这个时代,你松懈一天,就会有很多很 ...

  5. Java多线程开发系列之番外篇：事件派发线程---EventDispatchThread

    事件派发线程是java Swing开发中重要的知识点,在安卓app开发中,也是非常重要的一点.今天我们在多线程开发中,穿插进来这个线程.分别从线程的来由.原理和使用方法三个方面来学习事件派发线程. 一 ...

  6. 几个js函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 国内外从事CV相关的企业

    提示:本文为笔者原创,转载请注明出处:blog.csdn.net/carson2005 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问题,这里,我给出自己收集 ...

  8. C# ListView得到选中项及子项

    private void listViewEx_MouseClick(object sender, MouseEventArgs e) { ListViewItem lv = listViewEx.G ...

  9. C#语法糖，让编程更具乐趣

    一.什么是语法糖 语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法 ...

  10. 日文xp系统中 日文键盘模式转英式键盘模式

    键盘设备驱动早在Windows XP安装时就已经安装好了,但是系统却将日式键盘误识成了美式标准键盘,这会出现一些标点符号的实际输入与键盘标注不符的问题,对于用惯了英文键盘的人可 以盲打而不去理会,但对 ...