如何用jquery实现省市区联动

本篇内容介绍了"如何用jquery实现省市区联动"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

用jquery实现省市区联动的方法：1、创建一个HTML示例文件；2、在js文件中通过"$(function() {for(var i = 0; i < prvo.length; i++) {...}}"方法实现省市区联动即可。

本文操作环境：windows7系统、jquery-2.1.4版、DELL G3电脑

怎么用jquery实现省市区联动？

使用jQuery实现省市区三级联动菜单

通过jQuery实现省市三级联动菜单,有不足得地方还望大佬多多指导

HTML页面

                                                                                                                        --请选择省份--                                                                        --请选择城市--                                                                        --请选择区--                                                                        

js页面

var prvo = [        "山西", "四川"];var cit = [        ["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],        ["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]];var dis = [        [                ["小店区", "迎泽区"],                ["吕梁1", "吕梁2"],                ["临汾1", "临汾2"],                ["运城1", "运城2"],                ["阳泉1", "阳泉2"]        ],        [                ["成都1", "成都2"],                ["绵阳1", "绵阳2"],                ["雅安1", "雅安2"],                ["乐山1", "乐山2"],                ["眉山1", "眉山2"]        ]]$(function() {        //初始化省份        for(var i = 0; i < prvo.length; i++) {                //每次循环加一个option标签                $("#prvoince").append("" + prvo[i] + "")        }        //---on---在选择元素上绑定一个或多个事件的事件处理函数        //加入change事件使在省发生改变时 发生改变        $("#prvoince").on('change', function() {                //清除元素,将上一次选择的内容清除掉,开始新一轮的选择                //$('#city').empty()                $('#city').text(' ');                $('#district').text(' ');                //利用选择器中的  :selected  方法匹配到所有的元素,然后再用index方法获得下标                //得到被选中省份的下标                var proIndex = $("#prvoince option:selected").index();                var citys = cit[proIndex - 1]                for(var i = 0; i < citys.length; i++) {                        $("#city").append("" + citys[i] + "")                        //[this.value]                }        })                $("#city").on('change',function(){                $("#district").empty()                var proIndex = $("#prvoince option:selected").index();                var citIndex = $("#city option:selected").index()                var distr = dis[proIndex - 1][citIndex]                for (var i = 0; i < distr.length; i++) {                        $("#district").append("" + distr[i]+ "")                }        })})

"如何用jquery实现省市区联动"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！