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线上查询之前要性能调优
查询优化是数据库性能调优的关键方面，目的是减少查询的执行时间和资源消耗。以下是一些常见的查询优化技巧及其示例： 使用合适的索引 问题： 全表扫描导致查询缓慢优化： 为经常用于搜索条件的列添加索引示例： 假设有一…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...