How to Use jquery to retrieve json data and implement provincial/municipal connection

This article mainly introduces jquery's method for retrieving json data and implementing provincial/municipal connections. It can be used to read json data and bind it to the drop-down menu, which is of great practical value, for more information about how jquery retrieves json data, see the following example. Share it with you for your reference. The details are as follows:

To use jQuery mobile as the framework for creating mobile web, you need to implement provincial/municipal functions. The specific code is as follows (where optimization is required ):

Html code:

JQuery mobile has the input list attribute, followedTag in the middleThis is an option, which is equivalent to the drop-down list function of input. Of course, the list name of input must be consistent with the id in datalist.

Js Code:

Js Code and main functions

1. Extract json data and bind it to the provincial drop-down list

2. After the provincial input is selected, the Municipal list is automatically bound.

3. The drop-down list at the district level is the same as that at the municipal level.

Script $ (function () {getProvince (); // After the page is opened, the provincial drop-down list is automatically bound}) // obtain the provincial function getProvince () {var Aid; var Afather; pai.get('area_json0.txt ', {}, function (data) {for (var I = 0; I <data. length; I ++) {if (data [I]. fatherId = 0) {Afather + ='';}}$ ("# 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; 2.16.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 "); pai.get('area_json0.txt ', {}, function (data) {for (var n = 0; n <data. length; n ++) {if (data [n]. fatherId = val) {alert (data [n]. id); Acity + ='';}}$ Listcity. append (Acity) ;}, 'json');} function getJsonArea (Name) {var areaID; 2.16.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 "); pai.get('area_json0.txt ', {}, function (data) {for (var m = 0; m <data. length; m ++) {if (data [m]. fatherId = Aval) {alert (data [n]. id); Aarea + ='';}}$ Listarea. append (Aarea) ;}, 'json');} script

The Code should be further optimized to save the Code temporarily.