当前位置： 首页 > news >正文

JavaScript三级联动jQuery写法

news 2026/4/11 13:36:13

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…...

编程日记 2024/8/6 21:03:28

无人机挂载抓捕网

一、技术原理与机制 无人机挂载抓捕网装置的技术原理是通过无人机平台的飞行能力和灵活性&#xff0c;结合特制的抓捕网装置&#xff0c;实现对目标的快速、准确抓捕。抓捕网装置在接收到指令后&#xff0c;通过特定机制快速展开并包围目标&#xff0c;从而实现抓捕任务。 二…...

编程日记 2024/8/6 21:02:27

174.地下城游戏——LeetCode

题目 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里&#xff0c;他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初始健康点数为一个正整数。如果他的健康点数在某一时刻…...

编程日记 2024/8/6 21:01:26

登录相关功能的优化【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;…...

编程日记 2024/8/6 21:00:25

向日葵没有显示器会卡住

前言 有一台机器【ubuntu20】&#xff0c;用于远程开发&#xff0c;使用向日葵时候&#xff0c;如果不接显示器是会卡住的。。。 显示屏是有限的&#xff0c;所以现在解决一下这个问题。 卡在登录界面 双击启动 由于Ubuntu默认显示管理器是gdm&#xff0c;而向日葵使用的是l…...

编程日记 2024/8/6 20:57:22

【机器学习西瓜书学习笔记——聚类】

机器学习西瓜书学习笔记【第九章】 第九章 聚类9.1 聚类任务9.2 性能度量两类指标 9.3距离计算基本性质属性有序属性无序属性 混合距离加权距离 9.4 原型聚类K-MEANS聚类算法步骤优势劣势 学习向量量化高斯混合聚类步骤难点例子EM思想的体现小结 9.5 密度聚类9.6 层次聚类 第九…...

编程日记 2024/8/6 20:55:20

MATLAB（8）深度变化模型

一、前言 在MATLAB中模拟深度变化模型通常依赖于具体的应用场景&#xff0c;比如海洋深度、地下水深度、地形高度变化等。由于“深度变化”可以涉及多种物理过程和数学模型&#xff0c;我将提供一个简化的示例&#xff0c;该示例模拟了一个基于时间变化的深度变化模型&#xff…...

编程日记 2024/8/6 20:53:18

mp3格式转换器哪个好用？汇总七款音频格式转换方法（无损转换）

音乐已经成为我们生活中不可或缺的一部分。但是在播放的时候&#xff0c;可能会遇到音频格式不兼容的情况。特别是在一些下载站或音乐平台获取的音频&#xff0c;有些特殊格式在播放器上无法正常播放&#xff0c;一般这种情况我们需要借助mp3转换器解决。 mp3是一种常见的数字音…...

编程日记 2024/8/6 20:52:17

移行前的复盘：CodeCommit 的重要地位分析

前言 截至7月28日&#xff0c;关于AWS CodeCommit的现状如下&#xff1a; 现有账号的现有存储库可以继续使用CodeCommit&#xff0c;不受限制。之前未使用过CodeCommit的账号&#xff08;或没有现有存储库的账号&#xff09;无法创建新的存储库。 这并不意味着CodeCommit的服…...

编程日记 2024/8/6 20:51:16

Java中等题-括号生成（力扣）

数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())","()()(…...

编程日记 2024/8/6 20:50:15

Flink 实时数仓（八）【DWS 层搭建（二）流量域、用户域、交易域搭建】

前言 今天的任务是完成流量域最后一个需求、用户域的两个需求以及交易域的部分需求&#xff1b; 1、流量域页面浏览各窗口汇总表 任务&#xff1a;从 Kafka 页面日志主题读取数据&#xff0c;统计当日的首页和商品详情页独立访客数。 注意&#xff1a;一般我们谈到访客&…...

编程日记 2024/8/6 20:48:13

gitlab-runner /var/run/docker.sock connect permission denied

usermod -aG docker gitlab-runner sudo service docker restart参考&#xff1a;https://gitlab.com/gitlab-org/gitlab-runner/-/issues/3492...

编程日记 2024/8/6 20:46:11

网络安全 - 应急响应检查表

前言 本项目旨在为应急响应提供全方位辅助&#xff0c;以便快速解决问题。结合自身经验和网络资料&#xff0c;形成检查清单&#xff0c;期待大家提供更多技巧&#xff0c;共同完善本项目。愿大家在应急之路一帆风顺。 图片皆来源于网络&#xff0c;如有侵权请联系删除。 一…...

编程日记 2024/8/6 20:45:10

AD常用PCB设计规则介绍 （详细版）

AD09常用PCB设计规则介绍 电气设计规则用来设置在电路板布线过程中所遵循的电气方面的规则&#xff0c;包括安全间距、短路、未布线网络和未连接引脚这四个方面的规则&#xff1a; &#xff08;1&#xff09;、安全间距规则(clearance) 该规则用于设定在PCB设计中&#xff0…...

编程日记 2024/8/6 20:42:05

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…...

编程日记 2024/8/6 20:41:03

Redis基础总结、持久化、主从复制、哨兵模式、内存淘汰策略、缓存

文章目录 Redis 基础Redis 是什么&#xff0c;有哪些特点为什么要使用 Redis 而不仅仅依赖 MySQLRedis 是单线程吗Redis 单线程为什么还这么快 Redis 数据类型和数据结构五种基本数据结构及应用场景其他数据类型Redis 底层数据结构 Redis 持久化数据不丢失的实现AOF 日志RDB 快…...

编程日记 2024/8/6 20:40:02

Java与Python优劣势对比：具体例子与深入分析

在软件开发的世界里&#xff0c;Java和Python是两座不可忽视的高峰。它们各自拥有独特的优势和应用场景&#xff0c;为开发者提供了多样化的选择。本文将通过具体例子&#xff0c;深入分析Java和Python在不同方面的表现&#xff0c;以期为读者提供更为详尽的参考。 1. 语法简洁…...

编程日记 2024/8/6 20:38:01

C++内存泄漏介绍

C内存泄漏&#xff08;Memory Leak&#xff09;是指程序在运行过程中&#xff0c;动态分配的内存没有被适当地释放或回收&#xff0c;导致这部分内存始终被占用&#xff0c;无法再被程序或其他程序使用。这种情况通常发生在使用了new或malloc等函数动态分配内存后&#xff0c;忘…...

编程日记 2024/8/6 20:37:00

C++分析红黑树

目录 红黑树介绍 红黑树的性质与平衡控制关系 红黑树节点的插入 情况1&#xff1a;不需要调整 情况2&#xff1a;uncle节点为红色 情况3&#xff1a;uncle节点为黑色 总结与代码实现 红黑树的删除&#xff08;待实现&#xff09; 红黑树的效率 红黑树介绍 红黑树是第二种平衡二…...

编程日记 2024/8/6 20:34:58

mysql线上查询之前要性能调优

查询优化是数据库性能调优的关键方面&#xff0c;目的是减少查询的执行时间和资源消耗。以下是一些常见的查询优化技巧及其示例&#xff1a; 使用合适的索引 问题&#xff1a; 全表扫描导致查询缓慢优化&#xff1a; 为经常用于搜索条件的列添加索引示例&#xff1a; 假设有一…...

编程日记 2024/8/6 20:32:55

深度学习学习算法的三要素 —— 任务、性能与经验（十五）

1. 定位导航 前 14 篇完成了所有数学基础——线性代数、概率与信息论、数值计算。从本篇开始，正式进入机器学习和深度学习的核心内容。 Mitchell 在 1997 年给出了机器学习的经典定义： “对于某类任务 TTT 和性能度量 PPP，一个计算机程序被认为可以从经验...

编程新知 2026/4/11 13:06:39

免费开源电路板查看器OpenBoardView终极指南：轻松查看和分析.brd文件

免费开源电路板查看器OpenBoardView终极指南&#xff1a;轻松查看和分析.brd文件 【免费下载链接】OpenBoardView View .brd files 项目地址: https://gitcode.com/gh_mirrors/op/OpenBoardView OpenBoardView是一款功能强大的免费开源电路板文件查看工具&#xff0c;专…...

编程新知 2026/4/11 13:06:39

Ubuntu系统下SocketCAN实战：免驱配置PCAN/PCAN FD设备全流程

1. 认识SocketCAN与PCAN设备 在嵌入式开发和汽车电子领域&#xff0c;CAN总线就像设备之间的"神经传导系统"&#xff0c;而SocketCAN则是Linux内核为这个系统提供的"标准语言接口"。我第一次接触PCAN设备时&#xff0c;发现它有个巨大优势——大多数型号在…...

编程新知 2026/4/11 12:50:19

PDF-Extract-Kit-1.0与STM32CubeMX的嵌入式集成方案

PDF-Extract-Kit-1.0与STM32CubeMX的嵌入式集成方案 1. 工业现场的真实需求场景 在工厂自动化产线里&#xff0c;设备运行日志、维修手册、质检报告这些资料大多以PDF格式存在。操作员需要快速从几十页的技术文档中提取某个传感器的参数范围&#xff0c;或者从维修记录里找出…...

编程新知 2026/4/11 11:31:02

83个高效Tracker服务器：让你的BT下载速度飙升300%的终极秘籍

83个高效Tracker服务器&#xff1a;让你的BT下载速度飙升300%的终极秘籍 【免费下载链接】trackerslist Updated list of public BitTorrent trackers 项目地址: https://gitcode.com/GitHub_Trending/tr/trackerslist 还在为BT下载速度慢如蜗牛而烦恼吗&#xff1f;每次…...

编程新知 2026/4/11 10:11:06

别再只盯着理论了！用LTspice仿真施密特触发器，5分钟搞定传输特性分析

别再只盯着理论了&#xff01;用LTspice仿真施密特触发器&#xff0c;5分钟搞定传输特性分析 在电子电路设计中&#xff0c;施密特触发器因其独特的迟滞特性而广受欢迎&#xff0c;它能有效消除噪声干扰&#xff0c;提高信号稳定性。然而&#xff0c;传统的理论分析往往让初学者…...

编程新知 2026/4/11 9:52:49

PowerPaint-V1 Gradio快速部署：国内镜像加速，消费级显卡也能流畅运行

PowerPaint-V1 Gradio快速部署&#xff1a;国内镜像加速&#xff0c;消费级显卡也能流畅运行 1. 为什么你需要关注PowerPaint-V1 如果你经常需要处理图片&#xff0c;比如去掉照片里多余的路人、抹掉商品图上的水印、或者给老照片修复破损的地方&#xff0c;那你一定知道这活…...

编程新知 2026/4/11 9:50:46

Nunchaku FLUX.1-dev 操作系统兼容性指南：Windows系统部署要点

Nunchaku FLUX.1-dev 操作系统兼容性指南&#xff1a;Windows系统部署要点 如果你是一名Windows开发者&#xff0c;想在自己的电脑上跑起来Nunchaku FLUX.1-dev&#xff0c;那你来对地方了。我知道&#xff0c;很多AI模型和工具的教程&#xff0c;默认都是给Linux或者macOS用户…...

编程新知 2026/4/11 9:38:22

SenseVoice-small WebUI参数详解：auto语言检测、ITN开关与情感识别调优

SenseVoice-small WebUI参数详解&#xff1a;auto语言检测、ITN开关与情感识别调优 1. 引言&#xff1a;不只是转文字&#xff0c;更是理解语音 如果你用过语音转文字工具&#xff0c;可能会发现一个尴尬的情况&#xff1a;明明说的是“一百二十”&#xff0c;识别出来却还是…...

编程新知 2026/4/11 9:17:38

【R 4.5时空数据实战白皮书】：从GPS轨迹聚类到疫情传播模拟，8个生产级案例代码全开源（含GitHub Actions自动化验证脚本）

第一章&#xff1a;R 4.5时空数据可视化工具概览与生态演进R 4.5&#xff08;发布于2023年4月&#xff09;标志着时空数据分析生态的重要转折点&#xff1a;核心图形引擎全面支持高精度地理坐标系投影缓存&#xff0c;sf、stars 和 spacetime 等关键包完成与 R 4.5 的 ABI 兼容…...

编程新知 2026/4/11 6:07:05