首页 前端知识 如何使用JQuery实现Js二级联动和三级联动

如何使用JQuery实现Js二级联动和三级联动

2024-04-29 11:04:53 前端知识 前端哥 425 105 我要收藏

前言:使用JQuery封装好的js方法来实现二级三级联动要比直接使用js来实现二级三级联动要简洁很多。所以说JQuery是个非常强大的、简单易用的、兼容性好的JavaScript库,已经成为前端开发人员不可缺少的一部分,是Web开发中最流行的JavaScript库之一。

注意:使用JQuery库,必须从官方网站下载最新版本的JQuery库文件,然后导入你项目的根目录

 我这里是直接下载的是Layui官方网站最新版本的layui库文件,Layui里面也有JQuery库,Layui是基于JQuery开发的...

文章目录:

  1. 二级联动实现
  2. 三级联动实现

一、JQuery二级联动的实现

还是那句话,还是老套路,先创建 HTML 两个 <select></select> 下拉列表


    <select id="province" onchange="getCity()"></select>
    <select id="city">
        <option>请选择</option>
    </select>

好了,HTML 的那个两个下拉列表已经创建出来了,接下来就是 JavaScript代码实现相应的功能了

直接上代码:

 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($("<option></option>").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($("<option></option>").text(value));
                });
            }
        });


    }) ;

append:是指定元素末尾添加内容的方法,可以接受任意数量的参数,每个参数都会被添加到目标元素的末尾,比如:$("ul").append("<li>小宝贝</li>")

alltr:获取或设置 HTLM 属性值的方法,可以传递一个参数用于获取属性值,也可以传递两个参数,用于设置属性值,比如我现在要设置一个图片img src属性值:$("img").attr("src", "newSrc.jpg")

上面就是一个使用JQuery实现的二级联动了,这里不过多唠嗑,一些概念就不写了,下面我们开始三级联动代码实现。

二、JQuery三级联动的实现

还是那句话,还是老套路,先创建 HTML 三个 <select></select> 下拉列表

 <select id="province">
        
    </select>
 
    <select id="city">
        <option>请选择</option>
    </select>


    <select id="district">
        <option>请选择</option>
    </select>

好了,下面我们直接上JavaScript代码,不过三级联动不能像二级联动那么草率了,详细讲解

1)创建JavaScript对象字面量

什么是对象字面量?其实就是一种JavaScript对象方法,它是[object literal]的一种形式;是用来创建包含键值对的对象,可以快速地创建和初始化一个对象,不再需要定义一个构造函数!

 var data = {
    "广东省": {
        "珠海市": ["香洲区", "斗门区"],
        "广州": ["番禺", "黄埔"]
    },
    "仙侠世界": {
        "玄幻大陆": ["无敌区", "无人区"],
        "科技大陆": ["天才区", "学士区"]
    }
};

2)初始化省份列表

// 获取省份列表
var province = $("#province");
$.each(data, function(key, value) {
  var option = $("<option>").text(key);
  province.append(option);
});

append:是指定元素末尾添加内容的方法,可以接受任意数量的参数,每个参数都会被添加到目标元素的末尾,比如:$("ul").append("<li>小宝贝</li>")

3)根据省份获取城市列表

// 根据省份获取城市列表
function getCity() {
  var city = $("#city");
  var district = $("#district");
  //城市为0,当选择了省份的时候才有数据
  city.empty();
  var selectedProvince = province.val();
  $.each(data[selectedProvince], function(key, value) {
    var option = $("<option>").text(key);
    city.append(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 = $("<option>").text(value);
    district.append(option);
  });
}

// 函数绑定到省份和城市下拉框的 onchange 事件上
//县列表以便在用户选择不同的省份或城市时自动更新城市和区
province.on("change", getCity);
$("#city").on("change", getDistrict);

on:是JQuery一个绑定方法,用于指定元素添加一个或多个事件处理程序。

总结:

好了,以上代码就是使用JQuery库来实现的上面的二级三级联动,希望多多支持!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6277.html
标签
评论
发布的文章

@JsonCreator和@JsonValue

2024-05-05 22:05:05

Python 字符串转换为 JSON

2024-05-05 22:05:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!