好资源导航 » 文章资讯 » jQuery实现简单三级联动效果

jQuery实现简单三级联动效果

2023-07-17 03:55:05 294

本文实例为大家分享了jQuery实现简单三级联动的具体代码，供大家参考，具体内容如下

首先写一个JSON数据

[
{
"province":"吉林省",
"cities":[
{
"city":"长春市",
"counties":["朝阳区","经济开发区","高新区"]
},
{
"city":"吉林市",
"counties":["东城区","经济开发区","老城区"]
},

{
"city":"白山市",
"counties":["二道区","河东区","高新区"]
}
]
},
{
"province":"辽宁省",
"cities":[
{
"city":"沈阳市",
"counties":["朝阳区","经济开发区","高新区"]
},
{
"city":"大连市",
"counties":["东城区","经济开发区","老城区"]
},
{
"city":"铁岭市",
"counties":["二道区","河东区","高新区"]
}
]
},
{
"province":"山东省",
"cities":[
{
"city":"青岛市",
"counties":["朝阳区","经济开发区","高新区"]
},
{
"city":"济南市",
"counties":["东城区","经济开发区","老城区"]
},
{
"city":"威海市",
"counties":["二道区","河东区","高新区"]
}
]
}
]

然后用Ajax动态获取JSON文件中的数据

完整代码






三级联动




---


---


---

效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现简单三级联动效果

热门推荐

随机推荐