这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个省市区三级选择联级,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 2.可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 3.可以根据用户的操作,动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province">
<option>---请选择---</option>
</select>
<select id="city">
<option>---请选择---</option>
</select>
<select id="area">
<option>---请选择---</option>
</select>
<script src="addr.js"></script>
<script src="../lib/jquery-3.3.1.js"></script>
<script>
var pro = [];
$(function (){
$.each(temp,function (){
$("#province").append("<option>"+$(this)[0].label+"</option>");
});
$("#province").on("change",function (){
$("#city").html("<option>"+"---请选择---"+"</option>");
$("#area").html("<option>"+"---请选择---"+"</option>")
var select_pro = $(this).val();
$.each(temp,function (index,element){
if (element.label == select_pro){
var city = element.children;
for (let i = 0; i < city.length ; i++) {
$("#city").append("<option>"+city[i].label+"</option>");
}
$("#city").on('change',function ()
{
$("#area").html("<option>"+"---请选择---"+"</option>");
var select_city = $(this).val();
for (var i=0;i < city.length ; i++)
{
console.log(city[i].label);
if (city[i].label == select_city)
{
var area = city[i].children;
for (var i=0;i < area.length ; i++)
{
$("#area").append("<option>"+area[i].label+"</option>");
}
}
}
});
}
});
});
});
</script>
</body>
</html>
上述就是小编为大家分享的使用JavaScript怎么实现一个省市区三级选择联级了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。