前端之家 收集整理的这篇文章主要介绍了
jquery调取json数据实现省市级联的方法 ，
前端之家 小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了jquery调取json数据实现省市级联的方法 。分享 给大家供大家参考。具体如下：
使用jQuery mobile作为创建移动web的框架，需要实现省市级联的功能 ，具体代码 如下（还需要优化的地方）：
HTML代码 ：
jQuery mobile中，有input list属性 ，下方紧跟标签 ，中间包含的即为选项，相当于这个input为有下拉列表的功能 ，当然，input的list名称 需要和datalist中的id一致。
js代码 ：
js代码 ，主要功能
1、提取 json数据，绑定到省级下拉列表内
2、省级input选择好后，市级列表自动 绑定
3、区级下拉列表同市级一样
$(function () {
getProvince(); //
页面 打开后，省级下拉列表
自动 绑定
})
//
获取 省份
function getProvince() {
var Aid;
var Afather;
$.get('area_json0.txt',{},function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].fatherId == 0) {
Afather += '
function changeProvince(){
var city;
var prv_val=$("#province").val();
getJson(prv_val);
}
function changeCity(){
var city_val=$("#city").val();
getJsonArea(city_val);
}
function getJson(Name){
var cityID;
$.get('area_json0.txt',function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].name == Name) {
cityID=data[i].id;
}
}
setCity(cityID);
},'json');
}
function setCity(val){
var Acity;
var $listcity=$("#citylist");
$.get('area_json0.txt',function (data) {
for (var n = 0; n < data.length; n++) {
if (data[n].fatherId == val) {
alert(data[n].id);
Acity += '<option id=" ' + data[n].id + '" value="' + data[n].name + '">';
}
}
$listcity.append(Acity);
},'json');
}
代码 应该还可以进一步优化，暂时将代码 保存。
