Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.