如何使用JQuery实现Js二级联动和三级联动
前言:使用封装好的js方法来实现二级三级联动要比直接使用js来实现二级三级联动要简洁很多。所以说是个非常强大的、简单易用的、兼容性好的库,已经成为前端开发人员不可缺少的一部分,是Web开发中最流行的库之一。
注意:使用库,必须从官方网站下载最新版本的库文件,然后导入你项目的根目录
我这里是直接下载的是Layui官方网站最新版本的layui库文件,Layui里面也有库,Layui是基于开发的...
文章目录: 二级联动实现三级联动实现 一、二级联动的实现
好了,HTML 的那个两个下拉列表已经创建出来了,接下来就是 代码实现相应的功能了
直接上代码:
layui.use(['jquery', 'table', 'layer', 'form','upload'], function () {// 获取 LayUI 各模块的实例对象let $ = layui.jquery;let table = layui.table;let layer = layui.layer;let form = layui.form;let upload = layui.upload;//创建对象字面量var data = {"广东省":["广州","梅州"],"湖南省":["娄底","长沙"]} ; //初始化省份var province = $("#province");$.each(data, function(key, value) {province.append($("").attr("value", key).text(key));});//获取城市province.change(function() {var provinceName = $(this).val();var city = $("#city");city.empty();if (data[provinceName]) {$.each(data[provinceName], function(index, value) {city.append($("").text(value));});}});}) ;
:是指定元素末尾添加内容的方法,可以接受任意数量的参数,每个参数都会被添加到目标元素的末尾,比如:$("ul").("小宝贝")
alltr:获取或设置 HTLM 属性值的方法,可以传递一个参数用于获取属性值,也可以传递两个参数,用于设置属性值,比如我现在要设置一个图片img src属性值:$("img").attr("src", ".jpg")
上面就是一个使用实现的二级联动了,这里不过多唠嗑,一些概念就不写了,下面我们开始三级联动代码实现。
二、三级联动的实现
还是那句话,还是老套路,先创建 HTML 三个 下拉列表
好了,下面我们直接上代码,不过三级联动不能像二级联动那么草率了,详细讲解
1)创建对象字面量
什么是对象字面量?其实就是一种对象方法,它是[ ]的一种形式;是用来创建包含键值对的对象,可以快速地创建和初始化一个对象,不再需要定义一个构造函数!
var data = {"广东省": {"珠海市": ["香洲区", "斗门区"],"广州": ["番禺", "黄埔"]},"仙侠世界": {"玄幻大陆": ["无敌区", "无人区"],"科技大陆": ["天才区", "学士区"]}
};
2)初始化省份列表
// 获取省份列表
var province = $("#province");
$.each(data, function(key, value) {var option = $("
:是指定元素末尾添加内容的方法,可以接受任意数量的参数,每个参数都会被添加到目标元素的末尾,比如:$("ul").("小宝贝")
3)根据省份获取城市列表
// 根据省份获取城市列表
function getCity() {var city = $("#city");var district = $("#district");//城市为0,当选择了省份的时候才有数据city.empty();var selectedProvince = province.val();$.each(data[selectedProvince], function(key, value) {var option = $("
empty:清空之前的选项内容,方便更新选项内容
4)根据城市获取区县列表
function getDistrict() {var district = $("#district");//区县为0,当选择了城市的时候才有数据district.empty();//获取城市var selectedProvince = province.val();//获取区县var selectedCity = $("#city").val();//循环遍历$.each(data[selectedProvince][selectedCity], function(key, value) {var option = $("
on:是一个绑定方法,用于指定元素添加一个或多个事件处理程序。
总结:
好了,以上代码就是使用库来实现的上面的二级三级联动,希望多多支持!