省份地区三级联动的简单实现
Posted dark-fire-liehuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了省份地区三级联动的简单实现相关的知识，希望对你有一定的参考价值。
在此直接导入代码，详细内容代码中有注释，相应需要引入的文件大家可以自己到相应网站下载：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--省份--> <select id="province" name="province"> </select> <!--城市--> <select id="citys" name="city"> <option id=‘false‘>所在城市</option> </select> <!--地区--> <select id="dist" class="clear-Mar" name="district"> <option value="0">所在区</option> </select> <script src="./js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var sltProvince=document.getElementById(‘province‘) // console.log(sltProvince.childNodes) //获得城市下拉框的对象 //var sltCity=document.forms[0].city; var sltCity=document.getElementById(‘citys‘) //获得市区下拉框的对象 //var sltDistrict=document.forms[0].district; var sltDistrict=document.getElementById(‘dist‘) //ajax请求本地json文件数据，并添加到指定的位置 $(document).ready(function () { $.ajax({ url: ‘./js/province.json‘, async: false, success: function (res) { //console.log(res) var sheng = res var text_sh = `<option id=‘false‘>所在省份</option>` for(var i=0;i<sheng.length;i++){ // console.log(sheng[i][‘text‘]) var sh = sheng[i][‘text‘] var sid = sheng[i][‘value‘] tt = `<option id="${sid}">${sh}</option>` text_sh = text_sh+tt } $(‘#province‘).html(text_sh) } }); }); sltProvince.onchange=function(eve){ //成功获取被点击的option标签的id // console.log($(this).find("option:checked").attr("id")) var optionId=$(this).find("option:checked").attr("id") $(document).ready(function () { $.ajax({ url: ‘./js/city.json‘, async: false, success: function (res) { var city = res // console.log(‘城市‘,city) var text_city = `` //循环json对象形式的数据方法 for(var key in city){ console.log(‘单个city‘,key,city[key]) //console.log(key==optionId) //判断省id对应city的id是否一致 if(key==optionId){ for(i=0;i<city[key].length;i++){ var s_city = city[key][i][‘text‘] var s_sid = city[key][i][‘value‘] // console.log(123,s_city) tt = `<option id="${s_sid}">${s_city}</option>` text_city = text_city+tt } // console.log(45556,text_city) $(‘#citys‘).html(text_city) } // else{ // console.log(‘不存在‘) // } } } }); }); } sltCity.onchange=function(eve){ //成功获取被点击的option标签的id console.log($(this).find("option:checked").attr("id")) var optionId=$(this).find("option:checked").attr("id") $(document).ready(function () { $.ajax({ url: ‘./js/dists.json‘, async: false, success: function (res) { var city = res // console.log(‘城市‘,city) var text_city = `` //循环json对象形式的数据方法 for(var key in city){ // console.log(‘单个city‘,key,city[key]) //console.log(key==optionId) //判断省id对应city的id是否一致 if(key==optionId){ for(i=0;i<city[key].length;i++){ var s_city = city[key][i][‘text‘] var s_sid = city[key][i][‘value‘] // console.log(123,s_city) tt = `<option id="${s_sid}">${s_city}</option>` text_city = text_city+tt } // console.log(45556,text_city) $(‘#dist‘).html(text_city) } // else{ // console.log(‘不存在‘) // } } } }); }); } </script> </body> </html>
以上是关于省份地区三级联动的简单实现的主要内容，如果未能解决你的问题，请参考以下文章