jQuery实现简单三级联动效果
本文实例为大家分享了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文件中的数据
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三级联动</title>
</head>
<body>
<!-- 三级联动 - 两个二级联动 -->
<select id="province">
<option value="">---</option>
</select>
<select id="city">
<option value="">---</option>
</select>
<select id="county">
<option value="">---</option>
</select>
<script src="js/jquery-1.12.4.js"></script>
<script src="../js/createXMLHttpRequest.js"></script>
<script>
var $province = $("#province");
var $city = $("#city");
var $county = $("#county");
var json;
$.getJSON("data/server1.json", function (data) {
// 把data保存到json全局变量中
json = data;
// 遍历data数据
$.each(data, function (index, obj) {
// 获取所有的省份信息
var provinceName = obj.province;
// console.log(provinceName);
// 将省份信息添加到对应的select元素中
$province.append(
`<option value="${provinceName}">${provinceName}</option>`
);
});
$province.change(function () {
// 将城市下拉列表的选项清空
$city.empty();
$city.append(`<option value="">---</option>`);
// 获取到所选择的城市的文本信息
var provinceElementName = $(this).children("option:selected").text();
// console.log(provinceElementName);
$.each(json, function (index, obj) {
var provinceName = obj.province;
// console.log(provinceName);
if (provinceElementName === provinceName) {
// 获取到城市数组集合
var cities = obj.cities;
// 遍历城市数组集合
$.each(cities, function (index, obj) {
// console.log(obj.city);
// 获取到城市名称
var cityName = obj.city;
// 将该省对应的城市名称添加到对应的select中
$city.append(
`<option value="${cityName}">${cityName}</option>`
);
});
}
});
});
$city.change(function () {
// 将区级下拉列表的选项清空
$county.empty();
$county.append(`<option value="">---</option>`);
// 获取到所选择的城市的文本信息
var cityElementName = $(this).children("option:selected").text();
// console.log(cityElementName);
$.each(json, function (index, obj) {
// 获取该省对应的所有的城市信息
var cities = obj.cities;
// console.log(cities);
$.each(cities, function (index, cityObj) {
// console.log(cityObj.city);
var cityName = cityObj.city;
if (cityElementName === cityName) {
// 获取到区级数组集合
// console.log(cityObj.counties);
var counties = cityObj.counties;
// 遍历区级数组集合
$.each(counties, function (index, value) {
// 获取到区级名称
// console.log(value);
// 将该城市对应的区级名称添加到对应的select元素中
$county.append(`<option value="${value}">${value}</option>`);
});
}
});
});
});
});
</script>
</body>
</html>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery实现的省市区三级联动
省市级联动,附使用示例和数据表数据 有部分数据精确到乡镇一级!!! Git 地址:http://git.oschina.net/upliu/province-city-district 演示代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>省市区三级联动</title> </head>
-
jQuery+jsp实现省市县三级联动效果(附源码)
本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法.分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来: 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding=
-
简单实用jquery版三级联动select示例
html和js部分 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList</title> <style type="text/css"> *{margin:0;padding:0;} .selectList{width:200px;margin:50px auto;} </style>
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
省市区三级联动jquery实现代码
最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是这样啦),果断用google,搜出来的博文质量相当高,特此记录记录!!! 对于这个效果,其实我发现主要在于两点:1.jquery的筛选遍历操作:2.存储省.市.区这些数据时候的格式.另外一点是如何将获取得到的数据放到select option中(即下拉框中!) 对于第一个问题的解决,其实熟悉Jquery的博友估计是不难的,主要涉及
-
jquery+json 通用三级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进
-
JSON+Jquery省市区三级联动
效果图如下所示: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--读取数据库,以json的格式输出,然后复制json数据,创建js文件--> <script src="json/CityJson.js" type="text/j
-
jQuery实现的省市县三级联动菜单效果完整实例
本文实例讲述了jQuery实现的省市县三级联动菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
jQuery select表单提交省市区城市三级联动核心代码
jQuery select表单提交省市区城市三级联动,引用的是"jquery-1.7.min"类库,地区码查询地区名用数组存在AreaData_min,下面摘要部分代码: SelectArea.htm文件 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
-
基于jQuery+JSON的省市二三级联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty