成都网站建设设计

将想法与焦点和您一起共享

jQuery实现三级联动--省市县-创新互联

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

成都创新互联公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供做网站、成都网站建设、成都网页设计、小程序制作、成都网站开发、成都网站制作、成都软件开发、App定制开发是成都本地专业的网站建设和网站设计公司,等你一起来见证!

现有三个省的数组

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

对应的html代码:


        
        

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

for(var i=0; i"+aProvince[i]+"");
    }

第二步、根据省遍历对应的省的市,如选择河北省,则不会出现湖北省的市,只会出现河北省的市,选择湖北同样只会出现湖北的市。
先清除上回出现过的,如果没有选择过,就清除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"+ac[j]+"");
            }
        }
    });

第三步、同第二步

//根据市遍历县
    $("#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"+ac[j]+"");
            }
        }
    });

×××地址:链接:https://pan.baidu.com/s/1lxo42UyIQmudwBM-C6jtWA 密码:eu04
如果连接失效,可以联系我:huamuxiong_2018#163.com (请自动将#转换成@)

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:jQuery实现三级联动--省市县-创新互联
当前网址:http://chengdu.cdxwcx.cn/article/djcedd.html