zoukankan      html  css  js  c++  java
  • JavaScript省市级联

         我们在做系统时,很多情况下都需要在页面中嵌套省市级联信息,网上找到的范例大多省市信息不够完整或是级联操作过于复杂。这一篇我也发布一个省市级联示例程序,其中数据文件是借用前人的工作成果(原作者网名为norkts,具体请参见 sitedata.js 文件头部的注释信息)。下面是页面源码:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
       1:  
       2:     <script type="text/javascript" src="sitedata.js">
       1: </script>
       2:     <script type="text/javascript">
       3:         $(document).ready(function () {
       4:             var provinceSelector = $("#provinceSelector");
       5:             var citySelector = $("#citySelector");
       6:             var areaSelector=$("#areaSelector");
       7:             GetProvince();
       8:             provinceSelector.change(function () {
       9:                 var provinceName = provinceSelector.val();
      10:                 if (provinceName != '') {
      11:                     GetCity(provinceName);
      12:                     areaSelector.empty();
      13:                 }
      14:                 else{
      15:                     citySelector.empty();
      16:                     areaSelector.empty();
      17:                 }
      18:             });
      19:             citySelector.change(function () {
      20:                 var provinceName = provinceSelector.val();
      21:                 var cityName = citySelector.val();
      22:                 if(cityName!=''){
      23:                     GetArea(provinceName, cityName);
      24:                 }
      25:                 else{
      26:                     areaSelector.empty();
      27:                 }
      28:             });
      29:         });
      30:  
      31:         // 获取省份(直辖市)信息
      32:         function GetProvince() {
      33:             var provSelector = $("#provinceSelector");
      34:             provSelector.empty();
      35:             provSelector.append("<option value=''>--请选择--</option>");
      36:             var arrProvince = provinceInfo;
      37:             for (var provinceIndex in arrProvince) {
      38:                 provSelector.append("<option value='" + arrProvince[provinceIndex]["name"] + "'>" + arrProvince[provinceIndex]["name"] + "</option>")
      39:             }
      40:         }
      41:  
      42:         // 获取指定省份(直辖市)的城市(辖区或县)信息
      43:         function GetCity(provinceName) {
      44:             var citySelector = $("#citySelector");
      45:             var arrCity;
      46:             for (var provinceIndex in provinceInfo) {
      47:                 if (provinceInfo[provinceIndex]["name"] == provinceName) {
      48:                     arrCity = provinceInfo[provinceIndex]["sub"];
      49:                     break;
      50:                 }
      51:             }
      52:             citySelector.empty();
      53:             citySelector.append("<option value=''>--请选择--</option>")
      54:             for (var cityIndex in arrCity) {
      55:                 citySelector.append("<option value='" + arrCity[cityIndex]["name"] + "'>" + arrCity[cityIndex]["name"] + "</option>")
      56:             }
      57:         }
      58:  
      59:         // 获取指定城市(辖区或县)的地区信息
      60:         function GetArea(provinceName, cityName) {
      61:             var areaSelector = $("#areaSelector");
      62:             var arrCity, arrArea;
      63:             for (var provinceIndex in provinceInfo) {
      64:                 if (provinceInfo[provinceIndex]["name"] == provinceName) {
      65:                     arrCity = provinceInfo[provinceIndex]["sub"];
      66:                     for (var cityIndex in arrCity) {
      67:                         if (arrCity[cityIndex]["name"] == cityName) {
      68:                             arrArea = arrCity[cityIndex]["sub"];
      69:                             break;
      70:                         }
      71:                     }
      72:                 }
      73:             }
      74:             areaSelector.empty();
      75:             areaSelector.append("<option value=''>--请选择--</option>")
      76:             for (var areaIndex in arrArea) {
      77:                 areaSelector.append("<option value='" + arrArea[areaIndex]["name"] + "'>" + arrArea[areaIndex]["name"] + "</option>")
      78:             }
      79:         }
      80:     
    </script>
    </head>
    <body>
    <div>
        <select id="provinceSelector"></select>
        <select id="citySelector"></select>
        <select id="areaSelector"></select>
    </div>
    </body>
    </html>

    其中 sitedata.js 中的数据采用了JSON格式保存,本人不才,级联操作写得不够优雅,本程序仅作示例,具体操作乡亲们请自行修改(^_^)。

    附上源码如下:

    文件图标 点此下载示例源码

  • 相关阅读:
    POJ 2175 Evacuation Plan 费用流 负圈定理
    POJ 2983 Is the Information Reliable? 差分约束
    codeforces 420B Online Meeting
    POJ 3181 Dollar Dayz DP
    POJ Ant Counting DP
    POJ 1742 Coins DP 01背包
    中国儒学史
    产品思维30讲
    Java多线程编程核心技术
    编写高质量代码:改善Java程序的151个建议
  • 原文地址:https://www.cnblogs.com/gb2013/p/2808921.html
Copyright © 2011-2022 走看看