php三级城市联动,三级城市联动

摘要：html>

TitleTitle

省：

市：

区：

$(function () {

$.getJSON('省.json',function (data) {

// console.log(data);

var option = '选择(省)';

$.each(data,function (i) {

// console.log(data[i]);

option = option+''+data[i].proName+'';

})

// console.log(option);

$(option).appendTo("#pro");

})

$('#pro').change(function () {

var s = $(this).find(':selected').text();

$('p').html(s);

$.getJSON('市.json',function (data) {

// console.log(data)

var option = '选择(市)';

$.each(data,function (i) {

// console.log(data[i]);

if (data[i].proId == $('#pro').val()){

option = option+''+data[i].cityName+'';

}

})

$('#city').html(option);

})

})

$('#city').change(function () {

var s = $(this).find(':selected').text();

var p = $('p').text();

$('p').html(p+s);

$.getJSON('区.json',function (data) {

// console.log(data)

var option = '选择(区)';

$.each(data,function (i) {

// console.log(data[i]);

if (data[i].cityId == $('#city').val()){

option = option+''+data[i].areaName+'';

}

})

$('#area').html(option);

})

})

$('#area').change(function () {

var s = $(this).find(':selected').text();

var p = $('p').text();

$('p').html(p+s);

})

})

[

{

"proId":1,

"proName":"安徽"

},

{

"proId":2,

"proName":"江苏"

}

]

[

{

"cityId":1,

"cityName":"合肥",

"proId":1

},

{

"cityId":2,

"cityName":"芜湖",

"proId":1

},

{

"cityId":1,

"cityName":"南京",

"proId":2

},

{

"cityId":2,

"cityName":"苏州",

"proId":2

}

]

[

{

"areaId":1,

"areaName":"包河区",

"cityId":1

},

{

"areaId":2,

"areaName":"蜀山区",

"cityId":1

},

{

"areaId":1,

"areaName":"玄武区",

"cityId":2

},

{

"areaId":2,

"areaName":"昆山区",

"cityId":2

}

]

第一先获取json文件的数据，并添加到选择框中

1.通过$.getjson()方法获取到json文件里的数据，$.each()方法遍历获取到的对象

2.可以使用对象的属性方法data[i].proId获取到对象的值和名称

3.创建一个变量option存储值和名称，拼接成选择框的格式

4.将option添加到select框中

第二步选择框的change事件，通过获取选择框选中的值和第二级获取数据的proId比较

1.如果选择框选中的值和遍历获取到的对象的proId一致，变量option存储拼接值

2.将option添加到select框中

第三步  数据双向绑定

1.$(this).find(':selected').text()  获取当前选中的文本内容

2.将它添加到p标签中

3.获取到p标签的内容

3.将p标签的内容和当前选中的文本内容进行拼接    添加到p标签中

批改老师：韦小宝批改时间：2019-01-22 13:12:29

老师总结：掌握了三级联动的原理，以后写四级城市联动也是轻而易举的事情 继续加油吧