How to realize the three-level linkage of cities by ajax
This article mainly introduces ajax how to achieve urban three-level linkage, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
The details are as follows
After preparing the server
Html part
Please select province, please select city, please select region.
Style part
Div {text-align: center;} select {width: 150px; height: 30px;}
Js part
Var a = 0; var b = 0; var dumbnull; $.ajax ({type:'get', url:' http://127.0.0.1:6562/0929/area-json.js', success: function (data) {d = JSON.parse (data.slice (10mailim 1)) / / get json data and convert it into array data $.each (dline function (index,ele) {$(''). AppendTo ('# province') .text (ele.name) / / insert provincial data into the list})}}) $('# province') .on ('change',function (e) {/ / when the provincial changes, $.ajax ({type:'get', url:' http://127.0.0.1:6562/0929/area-json.js',) Success: function (data) {d=JSON.parse (data.slice (10mai Murray 1)) A = e.target.selectedIndex-1; / / the current drop-down subscript if (a = =-1) {$('# city'). Html ('Please select a city'); $('# district') .html ('Please select an area') } else {$('# city'). Html ('Please select a city'); $('# district') .html ('Please select a region') If (d [a] .children) {$.each (d [a] .children, function (index,ele) {$('') .appendTo ('# city') .text (ele.name)) }) $('# city') .on ('change',function (e) {/ / when the city changes, $.ajax ({type:'get') Url:' http://127.0.0.1:6562/0929/area-json.js', success: function (data) {d=JSON.parse (data.slice) B = e.target.selectedIndex-1; if (b = =-1) {$('# district'). Html ('Please select region');} else {$('# district') .html ('Please select region') If (d [a]. Children.children) {$.each (d [a] .children.children, function (index,ele) {$('') .appendTo ('# district') .text (ele.name) })})
All codes
Document div {text-align: center;} select {width: 150px; height: 30px;} Please select a province, please select a city, please select a region var a = 0 Var b = 0; var dumbnull; $.ajax ({type:'get', url:' http://127.0.0.1:6562/0929/area-json.js', success: function (data) {d = JSON.parse (data.slice (10mai Murray 1) $.each (dline function (index,ele) {$('') .appendTo ('# province') .text (ele.name)) )) $('# province') .on ('change',function (e) {$.ajax ({type:'get', url:' http://127.0.0.1:6562/0929/area-json.js',) Success: function (data) {d=JSON.parse (data.slice (10mai Murray 1)) A = e.target.selectedIndex-1; if (a = =-1) {$('# city'). Html ('Please select a city'); $('# district') .html ('Please select an area') } else {$('# city'). Html ('Please select a city'); $('# district') .html ('Please select a region') If (d [a] .children) {$.each (d [a] .children, function (index,ele) {$('') .appendTo ('# city') .text (ele.name)) })) $('# city') .on ('change',function (e) {$.ajax ({type:'get') Url:' http://127.0.0.1:6562/0929/area-json.js', success: function (data) {d=JSON.parse (data.slice) B = e.target.selectedIndex-1; if (b = =-1) {$('# district'). Html ('Please select region');} else {$('# district') .html ('Please select region') If (d [a]. Children.children) {$.each (d [a] .children.children, function (index,ele) {$('') .appendTo ('# district') .text (ele.name) })}) Thank you for reading this article carefully. I hope the article "how to achieve Urban three-level Linkage" shared by the editor will be helpful to you, and I also hope you will support it. Pay attention to the industry information channel, more related knowledge is waiting for you to learn!
