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

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

2021-07-29 15:02Jquery教程网 JavaScript

这篇文章主要介绍了jquery调取json数据实现省市级联的方法,可实现读取json数据绑定到下拉菜单的功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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>