JavaScript三级联动jQuery写法
HTML结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三级联动</title><!-- <style>select {margin: 10px 0;padding: 5px;width: 200px;}</style> --><script src="./js/jquery-3.7.1.js"></script>
</head><body><select id="provinceSelect"><option value="">请选择省份</option></select><select id="citySelect"><option value="">请先选择省份</option></select><select id="countySelect"><option value="">请先选择省份</option></select><button onclick="showResult()">显示结果</button><script src="./js/local.js"></script>
</body></html>
JS部分的jQuery写法
// 使用jQuery选择器获取省份、城市、区县选择器的DOM元素
let provinceSelect = $('#provinceSelect');
let citySelect = $('#citySelect');
let countySelect = $('#countySelect');
let data; // 用于存储省市县数据的变量// 加载数据的函数
function loadData() {// 使用jQuery的ajax方法从JSON文件加载数据，假设文件路径为 'js/locals.json'$.ajax({// 设置请求的文件路径为 'js/locals.json'url: 'js/localss.json',// 设置请求的数据类型为JSONdataType: 'json',// 请求成功后调用success函数处理数据success: function (json) {// 将数据存储在全局变量data中data = json; // 调用填充省份数据的函数populateProvinces(); }});
}// 填充省份数据的函数
function populateProvinces() {// 清空省份选择框provinceSelect.empty();// 添加默认选项provinceSelect.append($('<option value="">请选择省份</option>'));// 遍历数据中的每个省份，创建并添加一个选项元素$.each(data, function (index, province) {// 创建一个option元素，设置其value属性为省份的索引值，text属性为省份的名称provinceSelect.append($('<option></option>').text(province.province));});
}// 根据选择的省份填充城市数据的函数
function populateCities(provinceIndex) {// 清空城市选择框和区县选择框citySelect.empty();// 添加默认选项citySelect.append($('<option value="">请选择城市</option>'));countySelect.empty();countySelect.append($('<option value="">请先选择城市</option>'));let cities = data[provinceIndex].cities;// 遍历城市数据，创建并添加选项元素$.each(cities, function (index, city) {citySelect.append($('<option></option>').text(city.city));});
}// 根据选择的城市填充区县数据的函数
function populateCounties(provinceIndex, cityIndex) {// 清空区县选择框countySelect.empty();countySelect.append($('<option value="">请选择区县</option>'));let counties = data[provinceIndex].cities[cityIndex].counties;// 遍历区县数据，创建并添加选项元素$.each(counties, function (index, county) {countySelect.append($('<option></option>').text(county));});
}// 当省份选择器的选项改变时，调用此函数
$('#provinceSelect').on('change', function () {let provinceIndex = $(this).prop('selectedIndex') - 1; // -1是因为第一个option是请选择省份if (provinceIndex >= 0) {populateCities(provinceIndex);} else {citySelect.empty();// 添加默认选项请选择城市citySelect.append($('<option value="">请选择城市</option>'));countySelect.empty();// 添加选项为请先选择区县countySelect.append($('<option value="">请选择区县</option>'));}
});// 当城市选择器的选项改变时，调用此函数
$('#citySelect').on('change', function () {let provinceIndex = $('#provinceSelect').prop('selectedIndex') - 1;let cityIndex = $(this).prop('selectedIndex') - 1;if (cityIndex >= 0) {populateCounties(provinceIndex, cityIndex);} else {countySelect.empty();countySelect.append($('<option value="">请选择区县</option>'));}
});// 显示选择结果的函数
function showResult() {// 获取省份、城市、区县的value值let province = $('#provinceSelect option:selected').text();let city = $('#citySelect option:selected').text();let county = $('#countySelect option:selected').text();if (province && city && county) {// 弹窗显示选择结果alert(`您选择的结果是：${province} - ${city} - ${county}`);}
}// 页面加载完成后加载数据
$(document).ready(function () {// 调用加载数据的函数loadData();
});带有详细注释家人们！
相关文章：
JavaScript三级联动jQuery写法
HTML结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>三级联动</title><!-- <style…...
无人机挂载抓捕网
一、技术原理与机制 无人机挂载抓捕网装置的技术原理是通过无人机平台的飞行能力和灵活性，结合特制的抓捕网装置，实现对目标的快速、准确抓捕。抓捕网装置在接收到指令后，通过特定机制快速展开并包围目标，从而实现抓捕任务。 二…...
174.地下城游戏——LeetCode
题目 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里，他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初始健康点数为一个正整数。如果他的健康点数在某一时刻…...
登录相关功能的优化【JWT令牌+拦截器+跨域】
登录相关功能的优化 登录后显示当前登录用户el-dropdown: Element - The worlds most popular Vue UI framework <el-dropdown style"float: right; height: 60px; line-height: 60px"><span class"el-dropdown-link" style"color: white;…...
向日葵没有显示器会卡住
前言 有一台机器【ubuntu20】，用于远程开发，使用向日葵时候，如果不接显示器是会卡住的。。。 显示屏是有限的，所以现在解决一下这个问题。 卡在登录界面 双击启动 由于Ubuntu默认显示管理器是gdm，而向日葵使用的是l…...
【机器学习西瓜书学习笔记——聚类】
机器学习西瓜书学习笔记【第九章】 第九章 聚类9.1 聚类任务9.2 性能度量两类指标 9.3距离计算基本性质属性有序属性无序属性 混合距离加权距离 9.4 原型聚类K-MEANS聚类算法步骤优势劣势 学习向量量化高斯混合聚类步骤难点例子EM思想的体现小结 9.5 密度聚类9.6 层次聚类 第九…...
MATLAB（8）深度变化模型
一、前言 在MATLAB中模拟深度变化模型通常依赖于具体的应用场景，比如海洋深度、地下水深度、地形高度变化等。由于“深度变化”可以涉及多种物理过程和数学模型，我将提供一个简化的示例，该示例模拟了一个基于时间变化的深度变化模型ÿ…...
mp3格式转换器哪个好用？汇总七款音频格式转换方法（无损转换）
音乐已经成为我们生活中不可或缺的一部分。但是在播放的时候，可能会遇到音频格式不兼容的情况。特别是在一些下载站或音乐平台获取的音频，有些特殊格式在播放器上无法正常播放，一般这种情况我们需要借助mp3转换器解决。 mp3是一种常见的数字音…...
移行前的复盘：CodeCommit 的重要地位分析
前言 截至7月28日，关于AWS CodeCommit的现状如下： 现有账号的现有存储库可以继续使用CodeCommit，不受限制。之前未使用过CodeCommit的账号（或没有现有存储库的账号）无法创建新的存储库。 这并不意味着CodeCommit的服…...
Java中等题-括号生成（力扣）
数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且 有效的 括号组合。 示例 1： 输入：n 3 输出：["((()))","(()())","(())()","()(())","()()(…...
Flink 实时数仓（八）【DWS 层搭建（二）流量域、用户域、交易域搭建】
前言 今天的任务是完成流量域最后一个需求、用户域的两个需求以及交易域的部分需求； 1、流量域页面浏览各窗口汇总表 任务：从 Kafka 页面日志主题读取数据，统计当日的首页和商品详情页独立访客数。 注意：一般我们谈到访客&…...
gitlab-runner /var/run/docker.sock connect permission denied
usermod -aG docker gitlab-runner sudo service docker restart参考：https://gitlab.com/gitlab-org/gitlab-runner/-/issues/3492...
网络安全 - 应急响应检查表
前言 本项目旨在为应急响应提供全方位辅助，以便快速解决问题。结合自身经验和网络资料，形成检查清单，期待大家提供更多技巧，共同完善本项目。愿大家在应急之路一帆风顺。 图片皆来源于网络，如有侵权请联系删除。 一…...
AD常用PCB设计规则介绍 （详细版）
AD09常用PCB设计规则介绍 电气设计规则用来设置在电路板布线过程中所遵循的电气方面的规则，包括安全间距、短路、未布线网络和未连接引脚这四个方面的规则： （1）、安全间距规则(clearance) 该规则用于设定在PCB设计中࿰…...
mysql主从服务配置
主从MySQL服务器 [rootlocalhost ~]# yum -y install ntpdate [rootlocalhost ~]# ntpdate cn.ntp.org.cn [rootlocalhost ~]# yum -y install rsync [rootlocalhost ~]# vim mysql.sh #!/bin/bash yum list installed |grep libaio if [ $? ne 0 ]; then yum -y install…...
Redis基础总结、持久化、主从复制、哨兵模式、内存淘汰策略、缓存
文章目录 Redis 基础Redis 是什么，有哪些特点为什么要使用 Redis 而不仅仅依赖 MySQLRedis 是单线程吗Redis 单线程为什么还这么快 Redis 数据类型和数据结构五种基本数据结构及应用场景其他数据类型Redis 底层数据结构 Redis 持久化数据不丢失的实现AOF 日志RDB 快…...
Java与Python优劣势对比：具体例子与深入分析
在软件开发的世界里，Java和Python是两座不可忽视的高峰。它们各自拥有独特的优势和应用场景，为开发者提供了多样化的选择。本文将通过具体例子，深入分析Java和Python在不同方面的表现，以期为读者提供更为详尽的参考。 1. 语法简洁…...
C++内存泄漏介绍
C内存泄漏（Memory Leak）是指程序在运行过程中，动态分配的内存没有被适当地释放或回收，导致这部分内存始终被占用，无法再被程序或其他程序使用。这种情况通常发生在使用了new或malloc等函数动态分配内存后，忘…...
C++分析红黑树
目录 红黑树介绍 红黑树的性质与平衡控制关系 红黑树节点的插入 情况1：不需要调整 情况2：uncle节点为红色 情况3：uncle节点为黑色 总结与代码实现 红黑树的删除（待实现） 红黑树的效率 红黑树介绍 红黑树是第二种平衡二…...
mysql线上查询之前要性能调优
查询优化是数据库性能调优的关键方面，目的是减少查询的执行时间和资源消耗。以下是一些常见的查询优化技巧及其示例： 使用合适的索引 问题： 全表扫描导致查询缓慢优化： 为经常用于搜索条件的列添加索引示例： 假设有一…...
GPIO输出控制之LED闪烁、LED流水灯以及蜂鸣器应用案例
系列文章目录 STM32之GPIO（General Purpose Input/Output，通用型输入输出） 文章目录 系列文章目录前言一、LED和蜂鸣器简介1.1 LED1.2 蜂鸣器1.3 面包板 二、LED硬件电路2.1 低电平驱动电路2.2 高电平驱动电路 三、蜂鸣器硬件电路3.1 PNP型三…...
体系结构论文导读（三十四）：Design of Reliable DNN Accelerator with Un-reliable ReRAM
文章核心 这篇文章主要讨论了一种在不可靠的ReRAM（阻变存储器）设备上设计可靠的深度神经网络（DNN）加速器的方法。文章提出了两种关键技术来解决ReRAM固有的不可靠性问题：动态定点（DFP）数据表示…...
WebStock会话
其实使用消息队列也可以实现会话，直接前端监听指定的队列，使用rabbitmq的分组还可以实现不同群聊的效果。 1、依赖搭建： <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org…...
5_现有网络模型的使用
教程：现有网络模型的使用及修改_哔哩哔哩_bilibili 官方网址：https://pytorch.org/vision/stable/models.html#classification 初识网络模型 pytorch为我们提供了许多已经构造好的网络模型，我们只要将它们加载进来，就可以直接使…...
软件安全测试报告内容和作用简析，软件测试服务供应商推荐
在数字化时代，软件安全问题愈发凸显，安全测试显得尤为重要。软件安全测试报告是对软件系统在安全性方面进行评估和分析后的书面文件。该报告通常包含测试过程、测试发现、漏洞描述、风险评估及改进建议等重要信息。报告的目的是为了帮助开发团队及时发现…...
算法板子：树形DP、树的DFS——树的重心
思想： 代码： #include <iostream> #include <cstring> using namespace std;const int N 1e5 10;// vis标记当前节点是否被访问过; vis[1]true代表编号为1的节点被访问过 bool vis[N]; // h数组为邻接表; h数组上的每个坑位都串了一个单链…...
在C语言中，联合体或共用体（union ）是一种特殊的数据类型，允许在相同的内存位置存储不同的数据类型。
在C语言中，union 是一种特殊的数据类型，允许在相同的内存位置存储不同的数据类型。这意味着 union 中的所有成员共享同一块内存空间，因此它们之间会相互覆盖。在你给出的 Acceleration_type union 定义中，包含了三种不同类型的成员…...
MS2201以太网收发电路
MS2201 是吉比特以太网收发器电路，可以实现超高速度的 全双工数据传输。它的通信遵从 IEEE 802.3 Gigabit Ethernet 协议 中的 10 比特接口的时序要求协议。 MS2201 支持数据传输速率从 1Gbps 到 1.85Gbps 。 主要特点 ◼ 电源电压： 2.5V 、 3.3V …...
乐乐音乐Kotlin版
简介 乐乐音乐Kotlin版，主要是基于ExoPlayer框架开发的Android音乐播放器，它支持lrc歌词和动感歌词(ksc歌词、krc歌词、trc歌词、zrce歌词和hrc歌词等)、多种格式歌词转换器及制作动感歌词、翻译歌词和音译歌词。 编译环境 Android Studio Jellyfish | …...
C语言——预处理和指针
C语言——预处理和指针 预处理宏宏定义宏的作用域带参的宏 文件包含条件编译 指针指针的概念指针的定义指针变量初始化指针一维整型数组 预处理 编程的流程分为：编辑、编译、运行、调试四个阶段； 预处理属于编译阶段，编译过程又可以分为&…...