jquery调取json数据实现省市级联的方法

2019-11-20 13:17:50

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jquery调取json数据实现省市级联的方法。分享给大家供大家参考。具体如下：

使用jQuery mobile作为创建移动web的框架，需要实现省市级联的功能，具体代码如下（还需要优化的地方）：

Html代码：

jQuery mobile中，有input list属性，下方紧跟<datalist >标签，中间包含的<option value="XXXX"></option>即为选项，相当于这个input为有下拉列表的功能，当然，input的list名称需要和datalist中的id一致。

<input id="province" list="prvlist" placeholder="省/自治区/直辖市" onblur="changeProvince();">   <datalist id="prvlist">    </datalist>   <input style="" id="city" list="citylist" placeholder="市" onblur="changeCity();">   <datalist id="citylist">    </datalist>   <input style="" id="area" list="arealist" placeholder="区">   <datalist id="arealist">  </datalist>

js代码：

js代码，主要功能

1、提取json数据，绑定到省级下拉列表内

2、省级input选择好后，市级列表自动绑定

3、区级下拉列表同市级一样

<script>     $(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 += '<option id=" ' + data[i].id + '" value="' + data[i].name + '">';           }         }         $("#prvlist").append(Afather);       } , 'json');     }      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');    }     function getJsonArea(Name){       var areaID;       $.get('area_json0.txt', {}, function (data) {         for (var i = 0; i < data.length; i++) {           if (data[i].name == Name) {             areaID=data[i].id;           }         }         setArea(areaID);       } , 'json');     }     function setArea(Aval){       var Aarea;       var $listarea=$("#arealist");       $.get('area_json0.txt', {}, function (data) {         for (var m = 0; m < data.length; m++) {           if (data[m].fatherId == Aval) {             alert(data[n].id);             Aarea += '<option id=" ' + data[m].id + '" value="' + data[m].name + '">';           }         }         $listarea.append(Aarea);       } , 'json');     } </script>

代码应该还可以进一步优化，暂时将代码保存。

上一篇：javascript面向对象程序设计（一）

下一篇：JavaScript中实现单体模式分享