第八篇 一个用JS写的省市县三级联动

前些天，做网站用需要用到一个省市县的三级联动，数据要从数据库里面读取，我想了下思路，动手写了下来。

一、思路

js利用Ajax读取控制器里面的函数，利用函数读取存储过程，返回json。利用JS处理Json构建数组，利用索引加载到下拉菜单中

二、具体实现

1、数据库的设计（数据是提前设计好的，只能对现有的数据库进行编写）






编写存储过程如下SQL:

ALTER PROCEDURE [dbo].[getstatisticProvince]
 AS BEGIN   
 SELECT RegionCode ,Province,CITY,TOWN FROM [dbo].[Region] 
 END

2、调用存储过程这里省略



3、前台页面(页面的ID要和Js里面的Id值对应)

<tr>
                               <th>
                    <label class="col-lg-3 control-label">所在省:</label>
                </th>
                <th>
                    <select class="form-control input-sm" id="sProvince" name="sProvince">
                    </select>
                </th>

                <th>
                    <label class="col-lg-3 control-label">所在市:</label>
                </th>
                <th>
                    <select class="form-control input-sm" id="sCity" name="sCity">
                    </select>
                </th>

                <th>
                    <label class="col-lg-3 control-label">所在区:</label>
                </th>
                <th>
                    <select class="form-control input-sm" id="sTown" name="sTown">
                    </select>
                </th>
                   <th>
                    <input type="text" id="txtregion" style="display: none" name="RegionCode"/>
                </th>
            </tr>

4、js处理代码

function Dsy() {
    this.Items = {};
}
 
var temp = new Dsy();
Dsy.prototype.add = function (id, iArray) {
    if (iArray["Province"] != "") {
 
    if (this.Exists(id)) {
        this.Items[id] = this.Items[id] + "," + JSON.stringify(iArray);
    } else {
        this.Items[id] = JSON.stringify(iArray);
    }
    }
};
Dsy.prototype.Exists = function(id) {
    if (typeof(this.Items[id]) == "undefined") return false;
    return true;
};
 
function change(v) {
    var str = "province";
    for (i = 0; i < v; i++) {
        str = document.getElementById(s[i])[document.getElementById(s[i]).selectedIndex].text;
    }
    var ss = document.getElementById(s[v]);
   
  
    with (ss) {
        length = 0;
        options[0] = new Option(opt0[v], '3537');//添加空时的ID
        if (v == 1) {
            options[0] = new Option(opt0[v], document.getElementById(s[0])[document.getElementById(s[0]).selectedIndex].value);
        }
      else  if (v == 2) {
            options[0] = new Option(opt0[v], document.getElementById(s[1])[document.getElementById(s[1]).selectedIndex].value);
        }
        if (v && document.getElementById(s[v - 1]).selectedIndex > 0 || !v) {
            if (dsy.Exists(str)) {
                ar = eval("["+dsy.Items[str]+"]");
                for (i = 0; i < ar.length; i++) {
                    if (v == 0) {
                        options[length] = new Option(ar[i]["Province"], ar[i]["RegionCode"]);
                    }
                    else if (v == 1) {
                        if (ar[i]["CITY"] != document.getElementById(s[1])[document.getElementById(s[1]).length-1].text) {
                             options[length] = new Option(ar[i]["CITY"], ar[i]["RegionCode"]);
                        }
                    } else {
                        if (ar[i]["TOWN"]!="")
                        options[length] = new Option(ar[i]["TOWN"], ar[i]["RegionCode"]);
                    }
 
                }
                
                if (v)options[0].selected = true;
            }
        }
        if (++v < s.length) {change(v);}
    }
}
 
var dsy = new Dsy();
 
var s = ["sProvince", "sCity", "sTown"];//id对应到前台页面
var opt0 = ["省份", "地级市", "市、县级市、县"];
 
 
function SetDsy(code) {
    var province;
    $.ajax({
        url: '/JobInfo/GetJson',//目标路径函数
        type: 'GET',
        dataType: 'json',
        timeout: 10000,
        cache: false,
        success: function (data) {
            province = eval(data);
            for (i = 0; i < province.length; i++) {
                if ((province[i]["CITY"] == "" || province[i]["CITY"] == null) && (province[i]["TOWN"] == "" || province[i]["TOWN"] == null) && province[i]["Province"]!=null) {
                    dsy.add("province", province[i]);
                } else if (province[i]["TOWN"] == "") {
                    dsy.add(province[i]["Province"], province[i]);
                } else {
                    dsy.add(province[i]["CITY"], province[i]);
                }
            }
            //dsy.add("province", rPro);
 
            for (i = 0; i < s.length - 1; i++) {
                SetEvent(i);
                document.getElementById(s[i]).onchange = new Function("change(" + (i + 1) + ");");
            }
            SetEvent(2);
            change(0);
            if (code != "") {
                GetIndex(code);
            }
           
        }
    });
 
   
}
function SetEvent(i) {
    $("#"+s[i]).change(function () {
        $("#txtregion").val(this.value);
      
    });
}
 //修改时候选择当前ID下面对应的值
function GetIndex(code) {
    $.ajax({
        url: '/JobInfo/GetQuery',
        type: 'GET',
        data: { code: code },//$("#txtregion").val(),
        dataType: 'json',
        timeout: 10000,
        cache: false,
        success: function(data) {
            var Pro = eval("[" + dsy.Items["province"] + "]");
            for (i = 0; i < Pro.length; i++) {
                if (Pro[i]["Province"] == data[0]["Province"]) {
                    $("#" + s[0])[0][i + 1].selected = true;
                    change(1);
                    break;
                }
 
 
            }
            var city = eval("[" + dsy.Items[data[0]["Province"]] + "]");
            for (i = 0; i < city.length; i++) {
                if (city[i]["CITY"] == data[0]["CITY"]) {
                    $("#" + s[1])[0][i + 1].selected = true;
                    change(2);
                    break;
                }
            }
 
            var town = eval("[" + dsy.Items[data[0]["CITY"]] + "]");
            for (i = 0; i < town.length; i++) {
                if (town[i]["TOWN"] == data[0]["TOWN"]) {
                    $("#" + s[2])[0][i + 1].selected = true;
 
                    break;
                }
 
            }
        }
    });
}

新手发帖，多多关照，有兴趣加群

IT项目
324110381