How to use jquery to achieve linkage between provinces and municipalities

How to use jquery to realize linkage between provinces and municipalities: 1. Create an HTML sample file; 2. In the js file, pass "$(function() {for(var i = 0; i < prvo. length; i ) {...}}" method to achieve linkage between provinces and cities.

The operating environment of this article: windows7 system, jquery-2.1.4 version, DELL G3 computer

How to use jquery to realize province and city linkage?

Use jQuery to realize province and city three-level linkage menu

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

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 video tutorial"

The above is the detailed content of How to use jquery to achieve linkage between provinces and municipalities. For more information, please follow other related articles on the PHP Chinese website!