在此直接导入代码，详细内容代码中有注释，相应需要引入的文件大家可以自己到相应网站下载：
<!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>
原文地址：https://www.cnblogs.com/Dark-fire-liehuo/p/10274444.html
时间： 2024-12-13 19:22:34