JQUERY实现SELECT框三级联动

最近做了一个外包项目，其中写了一个模块是select框国家-省-市的三级联动，其中操作用到了JQuery，数据文件是引入了JSON，没有进行后端交互。如果用到后端交互的话，每次change的函数改成ajax请求即可。因为项目代码的保密，没有写得特别清楚，但结构应该也比较清晰了。

JSON格式

由于数据是用脚本分几个文档处理出来的，所以JSON文件的格式是形如以下形式，分为了国家-省.json，省-市.json，一般情况下整合在一起会比较合适，操作起来也比较方便。

[
{
    "country":"China",
    "provinces":[
        "Guangdong",
        "Beijing",
        "Shanghai"
    ]
},
{...}
]

HTML

<div class="select-list">
    <select name="country"></select>
    <select name="provinces"></select>
    <select name="cities"></select>
</div>

JS

var countrySel = $('select[name=country]');
var provincesSel = $('select[name=provinces]');
var citiesSel = $('select[name=cities]');

var changePro = function () {
    var optionData = "";
    // 遍历JSON
    $.each(country2pro, function (idx, reg) {
        optionData += "<option value='" + reg.country + "'>" + reg.country + "</option>";
    });
    countrySel.empty();
    countrySel.html(optionData);
    changePro();
};

var changePro = function () {
    var optionData = "";
    var idx = countrySel.get(0).selectedIndex;
    country2pro[idx].provinces.sort();
    country2pro[idx].provinces.forEach(function (item) {
        optionData += "<option value='"+item+"'>" + item + "</option>";
    });
    provincesSel.empty();
    provincesSel.html(optionData);
    changeCity();
};

var changeCity = function () {
    var optionData = "";
    // 获取province值
    var province = provincesSel.val();
    $.each(prov2cities, function (idx, opt) {
       if (opt.province == province) {
           opt.cities.sort();
           opt.cities.forEach(function (item) {
               optionData += "<option value='"+item+"'>" + item + "</option>";
           });
           return false;
       }
    });
    citiesSel.empty();
    citiesSel.html(optionData);
};

//文档加载时执行时事件
window.onload = function () {
    changeRegion();
}

//select框change事件
regionSel.change(function () {
    changePro();
});

countrySel.change(function () {
    changeCity();
});

一些小知识点

• $.each遍历JSON的时候通过return进行类似for循环的break和continue
• select框change的时候必须要清除框内的值