作业要求:
实现三级地址(省份、城市和区的数据罗列两三个即可)。
- 要求省份城市的信息必须以 json 文件格式存储。
- 利用 ajax 技术获取到省份信息。
- 动态渲染数据到网页上。
提示:将数据从取出后全部存储在对象中,根据选择的省份渲染包含的城市,再根据城市渲染出包含的区,
从而达到动态渲染数据.
创建三个下拉框
<!--1.创建三个下拉框-->
<div id="box">
<span>省</span>
<select name="province" id="province" >
<option value="-1">请选择</option>
</select>
<span>市</span>
<select name="city" id="city">
<option value="-1">请选择</option>
</select>
<span>区</span>
<select name="town" id="town">
<option value="-1">请选择</option>
</select>
</div>
创建一个包含三个下拉菜单的HTML结构,并给它们分别设置一个唯一的id和name属性。
将省的数据填充到省的下拉菜单中,可以通过遍历省数据,动态创建option元素并添加到省的下拉菜单中。
导入数据
<!--2.导入数据-->
<script src="./jquery.js"></script>
编写运行的程序
<!--3.编写运行的程序-->
<script>
$(document).ready(function(){
getProvince();
});
$("#province").change(function(){
getCity();
});
$("#city").change(function(){
getTown();
});
在页面加载完成后,通过$(document).ready()函数来执行初始化操作,调用getProvince()函数来获取省份数据并填充到省的下拉菜单中。
使用事件监听器$(“#province”).change()来监听省下拉菜单的变化,当省的值发生改变时,调用getCity()函数来获取对应的城市数据并填充到城市的下拉菜单中。
同样地,使用事件监听器$(“#city”).change()来监听城市下拉菜单的变化,当城市的值发生改变时,调用getTown()函数来获取对应的区县数据并填充到区的下拉菜单中。
编写函数
function getProvince(){
$.ajax({
type:"get",
url:'./text.json',
data:{},
success:function(text){
for(let i in text.provinces){
// let newOption=$("<option>"+text.province[i].province+"</option>");
let newOption=$("<option value = '"+i+"'>"+text.provinces[i].province+"</option>");
$("#province").append(newOption);
}
},
error:function(err){
alert(err);
}
});
}
使用$.ajax()函数发起一个GET请求,请求的URL是"./text.json",可以根据实际情况修改。
在成功回调函数success中,通过参数text获取到返回的数据。
使用for…in循环遍历text.provinces,text.provinces是一个包含省份信息的对象。
在循环中,创建一个新的option元素,并将省份的名称作为选项的文本内容。
为option元素设置一个value属性,该属性的值可以是省份的索引或者其他唯一标识,用于后续获取对应的城市数据。
将创建好的option元素添加到省的下拉菜单中,使用$(“#province”).append(newOption).
在错误回调函数error中,可以进行错误处理,比如弹出错误信息。
而getCity与getTown类似
function getCity(){
let index=$("#province").val();
//这里会出现一个bug就是如果市不重新选择,那么区是不会出现的,empty直接把请选择也去掉,即没有发生change,但我不知道怎么修改
$("#city").empty();
$("#town").empty();
$.ajax({
type:"get",
url:"./text.json",
data:{},
success:function(text){
for(let i in text.provinces[index].cities){
$("#city").append($("<option value = '"+i+"'>"+text.provinces[index].cities[i].city+"</option>"));
}
},
error:function(err){
alert(eer);
}
});
}
function getTown(){
let indexProvince=$("#province").val();
let indexCity=$("#city").val();
$("#town").empty();
$.ajax({
type:"get",
url:"./text.json",
data:{},
success:function(text){
for(let i in text.provinces[indexProvince].cities[indexCity].towns){
$("#town").append($("<option value = '"+i+"'>"+text.provinces[indexProvince].cities[indexCity].towns[i]+"</option>"));
}
},
error:function(err){
alert(eer);
}
});
}
</script>
运行结果
编写时发现的一些问题
1
一开始以为是错误的,后来经过大量时间研究发现原来这就是Live Severe
live reload enabled的意思是启用了实时重新加载功能。这意味着当你在编辑代码时,网页会自动重新加载,以便你可以立即看到你所做的更改。这对于开发人员来说非常方便,因为他们可以更快地测试和调试他们的代码。
2
这是因为浏览器中有安装其他插件
解决方法:把插件关闭即可
3.一个bug无法解决
这里会出现一个bug就是如果市不重新选择,那么区是不会出现的,empty直接把请选择也去掉,即没有发生change,但我不知道怎么修改empty函数???
额外知识
Ajax
异步无刷新技术