js实现简单省市区三级选择联级
更新时间：2021年04月27日 10:06:01 作者：魏郴
这篇文章主要介绍了js实现简单省市区三级选择联级，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现省市区三级选择联级的具体代码，供大家参考，具体内容如下
代码：
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢？其实实现代码很简单的,下面小编给大家分享js判断节假日实例代码,需要的朋友参考下吧2017-12-12
这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下2014-05-05
后台从数据库取出时间，JSON格式化后再传到gridpanel，这时时间变成了：/Date(32331121223)/这样的格式,本文将详细介绍解决Extjs显示从数据库取出时间转换JSON后的出现问题2012-11-11
这篇文章主要介绍了js实现仿阿里巴巴城市选择框效果,实例分析了javascript结合css与数组实现城市选择框的方法,需要的朋友可以参考下2015-06-06
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
这篇文章主要介绍了微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
这篇文章主要介绍了JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法,因转换的字符串数字都以0开头,导致parseInt函数在浏览器和Android WebView中转换结果不一样,本文给出了解决方法,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了H5移动端图片压缩上传开发流程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了javascript实现登录框拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了使用JavaScript轻松实现拖拽功能,让你的网页动起来,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-06-06
这篇文章主要为大家介绍了JS浏览器的首屏白屏时间计算示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论