jQuery实现 三级联动--省市县

1.遍历省 在省的一列追加遍历出来的省
2.遍历市
2.1 根据省的索引来选择对应的市
2.2 清空上一回选择的市和县
2.3 如果省的索引大于 0 ，使其为 0 ，才能正常的遍历市，否则不能正常匹配
2.4 在市的一列后边追加遍历出来的市
3.遍历县
3.1 根据市的索引来选择对应的县
3.2 清空上一回选择的县
3.3 如果市的索引大于 0 ，使其为 0 ，才能正常的遍历县，否则不能正常匹配
3.4 在县的一列后边追加遍历出来的县

现有三个省的数组

var aProvince = ["河北省","山西省","湖北省"];var aCity = [    ["石家庄市", "张家口市", "承德市", "秦皇岛市"],    ["太原市", "朔州市", "大同市", "阳泉市"],    ["武汉市", "孝感市", "宜昌市", "襄阳市"]];var aCounty = [    [        ["无极县", "赵县", "栾城县"],        ["沽源县", "尚义县", "阳原县"],        ["平泉县", "滦平县", "隆化县"],         ["抚宁县", "卢龙县", "昌黎县"]    ],    [        ["清徐县", "阳曲县", "娄烦县"],         ["山阴县", "应县", "右玉县"],         ["左云县", "阳高县", "天镇县"],        ["盂县", "平定县", "矿区"]    ],    [        ["武昌区", "洪山区", "东湖新区"],         ["云梦县", "大悟县", "应城市"],        ["秭归县", "远安县", "枝江市"],        ["枣阳市", "老河口市", "谷城县"]    ]];

对应的html代码：

<select id="selProvince">            <option>--请选择--</option>        </select>        <select id="selCity">            <option>--请选择--</option>        </select>        <select id="selCounty">            <option>--请选择--</option>        </select>

第一步、遍历省（最简单）
先求出数组的长度，否则无法遍历。
再在select元素里追加子元素option，使用append

for(var i=0; i<aProvince.length; i++){        $("#selProvince").append("<option>"+aProvince[i]+"</option>");    }

第二步、根据省遍历对应的省的市，如选择河北省，则不会出现湖北省的市，只会出现河北省的市，选择湖北同样只会出现湖北的市。
先清除上回出现过的，如果没有选择过，就清除0呗，不清除的话会在上回出现的基础上累加。
再获取省对应的索引值，如河北省应当是 1，但到我们定义的数组里是 0 ，我们让索引值 -1 ，即清除掉“--请选择--”的索引，让河北省的索引为 0 ，这样才可以遍历对应的市。
遍历方法同省

//根据省遍历市    $("#selProvince").change(function(){  //点击xx省的时候触发时事件        $("#selCity").children("option").not(":eq(0)").remove(); //清空市        $("#selCounty").children("option").not(":eq(0)").remove(); //清空县        num1 = parseInt($(this).children("option:selected").index());  //获取省索引        if(num1 > 0){            var ac =  aCity[num1-1];  //让市的索引从 当前省的索引-1开始遍历            for(var j=0; j<aCity.length; j++){                $("#selCity").append("<option>"+ac[j]+"</option>");            }        }    });

第三步、同第二步

//根据市遍历县    $("#selCity").change(function(){        $("#selCounty").children("option").not(":eq(0)").remove();  //只需清除县，        num2 = parseInt($(this).children("option:selected").index());  //获取市的索引        if(num2 > 0) {            var ac = aCounty[num1-1][num2-1];  //根据省找到市，在根据市找打县，再遍历            for(var j=0; j<aCounty.length; j++) {                $("#selCounty").append("<option>"+ac[j]+"</option>");            }        }    });

源码下载地址：链接：https://pan.baidu.com/s/1lxo42UyIQmudwBM-C6jtWA 密码：eu04
如果连接失效，可以联系我：huamuxiong_2018#163.com  （请自动将#转换成@）