[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动

案例 jQuery的三级联动

server2.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": ["二道区", "河东区", "高新区"]}]}
]

HTML代码展示

<!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/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/server2.json", function (data) {// 把data保存到json全局变量中json = data;// 遍历data数据$.each(data, function (index, obj) {// 获取所有的省份信息var provinceName = obj.province;// 将省份信息添加到对应的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();$.each(json, function (index, obj) {var provinceName = obj.province;if (provinceElementName === provinceName) {// 获取到城市数组集合var cities = obj.cities;// 遍历城市数组集合$.each(cities, function (index, obj) {// 获取到城市名称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();$.each(json, function (index, obj) {// 获取该省对应的所有的城市信息var cities = obj.cities;$.each(cities, function (index, cityObj) {var cityName = cityObj.city;if (cityElementName === cityName) {// 获取到区级数组集合var counties = cityObj.counties;// 遍历区级数组集合$.each(counties, function (index, value) {// 获取到区级名称// 将该城市对应的区级名称添加到对应的select元素中$county.append(`<option value="${value}">${value}</option>`);});}});});});});
</script>
</body>
</html>

[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动相关推荐

JS+JQuery实现前端省、市、区三级联动（插件）
大家在做web开发的时候,肯定会在前端代码里面遇到选择省市区(县)的功能,比如创建用户.编辑用户时,用户选择所在地等.好了多余的话不多说了,我们进入正题吧! 首先,在前端页面里面编写HTML代码: & ...
html5手机移动端三级联动城市选择器,jquery移动端省市县（区）三级联动插件
最近刚做完一个版本的项目,闲暇时间,就索性把项目中需要用到的插件都自己写了一个,毕竟自己动手丰衣足食才是最重要,自己写的,可以应对各种项目需求,今天又把手机端的省市区三级联动选择功能编写了一个插件出来 ...
html省市联动插件,jquery实现的交互体验更友好省市区三级联动插件
Options Change the default options with $().citypicker(options). Change the global default options w ...
百度云 ajax jquery 三级联动,jQuery ajax实现省市县三级联动
下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑第一步:先做一个省市区表格第二步:建个PHP页面显示用我是在里放用来接收要显示的省市区表格信 ...
Spring boot整合jpa Jquery实现三级联动
Spring boot 整合jpa JQuery 实现省,市,区, 三级联动效果三级联动在很多项目都必不可少,尤其是在付款时,需要选取地址,为了更好的用户体验感,从而出现了三级联动. 实现三级联动的 ...
如何使用JQuery实现Js二级联动和三级联动
前言:使用JQuery封装好的js方法来实现二级三级联动要比直接使用js来实现二级三级联动要简洁很多.所以说JQuery是个非常强大的.简单易用的.兼容性好的JavaScript库,已经成为前端开发人 ...
php省城联动_使用php ajax实现一个省市区的三级联动
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址使用方法 npm install v-distpick ...
关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题...
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
jQuery 中的 Ajax
jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript ...

[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动

案例 jQuery的三级联动

[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动相关推荐

最新文章

热门文章