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

JS实现省份地级市的选择

news 来源：原创 2025/8/16 1:52:00

JS实现省份地级市的选择
效果展示：
在这里插入图片描述
代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多级联动</title><!-- 多级联动：应用于购物车，地区选择，省份选择--><!-- 实现**省**市**区**县 --><script>function changeCity(obj){//获取这个省份的idvar pid = obj.value;console.log(pid);// 获取市信息(pid);var cityData = getArea(pid);console.log(cityData);var city= document.getElementById("area");// 清空市信息city.innerHTML = "<option value='0'>请选择</option>";console.log(city);//遍历市信息for(var i=0;i<cityData.length;i++){// 创建option标签var option = document.createElement("option");// 设置option标签的文本内容option.innerText = cityData[i];// 设置option标签的value值option.value = i+1;// 将option标签添加到select标签中city.appendChild(option);}}// 通过省份id获取市信息function getArea(pid){let area =[];if(pid==1){area=['朝阳区','海淀区','西城区']}else if(pid==2){area=['浦东区','宝山区','徐汇区']}else if(pid==3){area=['济南市','青岛市','泰安市']}else if(pid==4){area=['南充市','广安市','德阳市','绵阳市','眉山市']}return area;}</script>
</head>
<body><!-- 省份选择onchange表示当选择框的值发生改变的时候，触发onchange事件onchange="changeCity()" -->选择省份：<select onchange="changeCity(this)" id="city"><option value="0">请选择</option><option value="1">北京</option><option value="2">上海</option><option value="3">山东</option><option value="4">四川</option></select><br>选择城市：<!-- 市选择 --><select id="area"><option value="0">请选择</option></select>
</body>
</html>

相关文章：

JS实现省份地级市的选择

JS实现省份地级市的选择 效果展示&#xff1a; 代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><ti…...

编程日记 2025/8/16 1:52:00

【鸿蒙开发】Hi3861学习笔记-Visual Studio Code安装(New)

00. 目录 文章目录 00. 目录01. Visual Studio Code概述02. Visual Studio Code下载03. Visual Studio Code安装04. Visual Studio Code插件05. 附录 01. Visual Studio Code概述 vscode是一种简化且高效的代码编辑器&#xff0c;同时支持诸如调试&#xff0c;任务执行和版本管…...

编程日记 2025/8/15 15:50:32

记录致远OA服务器硬盘升级过程

前言 日常使用中OA系统突然卡死&#xff0c;刷新访问进不去系统&#xff0c;ping服务器地址正常&#xff0c;立马登录服务器检查&#xff0c;一看磁盘爆了。 我大脑直接萎缩了&#xff0c;谁家OA系统配400G的空间啊&#xff0c;过我手的服务器没有50也是30台&#xff0c;还是…...

编程日记 2025/8/13 13:06:29

计算机网络-网络规划与设计

基本流程 需求分析—》通信规范分析—》逻辑网络设计—》物理网络设计—》实施阶段 需求分析&#xff1a; 确定需求&#xff0c;包括&#xff1a;业务需求、用户需求、应用需求、计算机平台需求、网络通信需求等。 产物&#xff1a;需求规范 通信规范分析&#xff1a; 现有…...

编程日记 2025/8/15 1:16:36

C#opencv 遍历图像中所有点 不在圆范围内的点变为黑色,在圆范围内的保持原色

C#opencv 遍历图像中所有点 不在圆范围内的点变为黑色,在圆范围内的保持原色 安装 Install-Package OpenCvSharp4 Install-Package OpenCvSharp4.Windows 普通实现 using System; using System.Collections.Generic; using System.Linq; using OpenCvSharp; // 添加OpenCV引用…...

编程日记 2025/8/12 15:45:44

精通游戏测试笔记（持续更新）

第一章、游戏测试的两条规则 不要恐慌 不要将这次发布当作最后一次发布 不要相信任何人 把每次发布当作最后一次发布 第二章&#xff1a;成为一名游戏测试工程师...

编程日记 2025/6/28 9:49:46

Linux内核，mmap_pgoff在mmap.c的实现

1. mmap_pgoff的系统调用实现如下 SYSCALL_DEFINE6(mmap_pgoff, unsigned long, addr, unsigned long, len,unsigned long, prot, unsigned long, flags,unsigned long, fd, unsigned long, pgoff) {return ksys_mmap_pgoff(addr, len, prot, flags, fd, pgoff); }2. ksys_mma…...

编程日记 2025/8/12 16:30:01

深度揭秘：蓝耘 Maas 平台如何重塑深度学习格局

目录 前言 深度学习&#xff1a;技术基石与发展脉络 蓝耘 Maas 平台&#xff1a;深度学习的强大助推器 1. 高性能算力支撑 2. 丰富的模型支持 3. 便捷的开发体验 4. 完善的安全保障 代码示例&#xff1a;蓝耘 Maas 平台上的深度学习实践 1. 注册与登录 2. 代码实现 …...

编程日记 2025/8/14 14:15:52

深入解析操作系统进程控制：从地址空间到实战应用

引言 想象这样一个场景&#xff1a; 你的游戏本同时运行着《赛博朋克2077》、Chrome浏览器和Discord语音 突然游戏崩溃&#xff0c;但其他应用依然正常运行 此时你打开任务管理器&#xff0c;发现游戏进程已经消失&#xff0c;但内存占用却未完全释放 这背后涉及的关键机制…...

编程日记 2025/8/6 6:12:04

网络空间安全（33）MSF漏洞利用

前言 Metasploit Framework&#xff08;简称MSF&#xff09;是一款功能强大的开源安全漏洞利用和测试工具&#xff0c;广泛应用于渗透测试中。MSF提供了丰富的漏洞利用模块&#xff0c;允许安全研究人员和渗透测试人员利用目标系统中的已知漏洞进行攻击。 一、漏洞利用模块&…...

编程日记 2025/8/13 21:34:23

《Electron 学习之旅：从入门到实践》

前言 Electron 简介 Electron 是由 GitHub 开发的一个开源框架&#xff0c;基于 Chromium 和 Node.js。 它允许开发者使用 Web 技术&#xff08;HTML、CSS、JavaScript&#xff09;构建跨平台的桌面应用程序。 Electron 的优势 跨平台&#xff1a;支持 Windows、macOS 和 Linux…...

编程日记 2025/8/11 13:36:50

通达信软件+条件选股+code

在通达信软件中，你的选股公式需要放在 "公式管理器" 的 "条件选股公式" 分类中。以下是详细操作步骤： 一、打开公式管理器 打开通达信软件，按快捷键 Ctrl + F （或点击顶部菜单栏："公式" → "公式管理器"） 二、创建新公式 选择分…...

编程日记 2025/8/11 10:15:59

【2025】基于springboot+vue的汽车销售试驾平台（源码、万字文档、图文修改、调试答疑）

基于 Spring Boot Vue 的汽车销售试驾平台通过整合前后端技术&#xff0c;实现了汽车销售和试驾预约的信息化和智能化。系统为管理员和用户提供了丰富的功能&#xff0c;提升了客户体验和销售效率&#xff0c;增强了数据分析能力&#xff0c;为汽车销售行业的发展提供了新的途…...

编程日记 2025/8/10 23:32:18

Spring Web MVC入门

一、什么是SpringMVC 首先&#xff0c;MVC是一种架构设计模式&#xff0c;也是一种思想&#xff0c;而SpringMVC是对MVC思想的具体实现&#xff0c;除此之外&#xff0c;SpringMVC还是一个Web框架。 总的来说&#xff0c;SpringMVC就是一个实现MVC模式的Web框架。 而MVC可以…...

编程日记 2025/8/13 19:08:50

5G核心网实训室搭建方案：轻量化部署与虚拟化实践

5G核心网实训室 随着5G技术的广泛应用&#xff0c;行业对于5G核心网人才的需求日益增长。高校、科研机构和企业纷纷建立5G实训室&#xff0c;以促进人才培养、技术创新和行业应用研究。IPLOOK凭借其在5G核心网领域的深厚积累&#xff0c;提供了一套高效、灵活的5G实训室搭建方…...

编程日记 2025/8/14 10:55:12

IMX6ULL学习整理篇——Linux驱动开发的基础2 老框架的一次实战：LED驱动

IMX6ULL学习整理篇——Linux驱动开发的基础2 老框架的一次实战&#xff1a;LED驱动 ​ 在上一篇博客中&#xff0c;我们实现了从0开始搭建的字符设备驱动框架&#xff0c;但是这个框架还是空中楼阁&#xff0c;没有应用&#xff0c;很难说明我们框架的正确性。这里&#xff0c…...

编程日记 2025/8/12 15:14:00

网络空间安全（32）Kali MSF基本介绍

前言 Metasploit Framework&#xff08;简称MSF&#xff09;是一款功能强大的开源安全漏洞检测工具&#xff0c;被广泛应用于渗透测试中。它内置了数千个已知的软件漏洞&#xff0c;并持续更新以应对新兴的安全威胁。MSF不仅限于漏洞利用&#xff0c;还包括信息收集、漏洞探测和…...

编程日记 2025/8/12 10:54:16

零基础上手Python数据分析 (3)：Python核心语法快速入门 (下) - 程序流程控制、函数与模块

写在前面 还记得上周我们学习的 Python 基本数据类型、运算符和变量吗？ 掌握了这些基础知识，我们已经能够进行一些简单的数据操作了。 但是，在实际的数据分析工作中，仅仅掌握基本语法是远远不够的。 我们需要让程序能够 根据条件做出判断，重复执行某些操作，组织和复用代…...

编程日记 2025/8/12 1:24:23

C++【类和对象】(超详细！！！)

C【类和对象】 1.运算符重载2.赋值运算符重载3.日期类的实现 1.运算符重载 (1).C规定类类型运算符使用时&#xff0c;必须转换成调用运算符重载。 (2).运算符重载是具有特殊名字的函数&#xff0c;名字等于operator加需要使用的运算符&#xff0c;具有返回类型和参数列表及函数…...

编程日记 2025/8/15 12:01:05

Windows-PyQt5安装+PyCharm配置QtDesigner + QtUIC

个人环境 Windows 11 pycharm 2024.2 Anaconda2024.6python 3.9 1)先使用pip命令在线安装 1)pip install PyQt5 2)pip install PyQt5-tools2)配置环境变量 1&#xff1a;安装成功后可以在python的安装目录Lib\site-packahes目录下看到安装包。比如我的路径是E:\anaconda3…...

编程日记 2025/8/14 20:42:24

qq音乐 webpack 补环境

网址&#xff1a; aHR0cHM6Ly95LnFxLmNvbS9uL3J5cXEvcGxheWVy​ 1.接口分析 接口&#xff1a;cgi-bin/musics.fcg​ 参数&#xff1a;sign是加密的 2.代码分析 进入调用栈 先在send位置打上断点&#xff0c;页面刷新 往上一个栈找 ‍ 可以看到上面就有一个关键词sign​是从…...

编程日记 2025/8/13 5:07:24

【蓝桥杯】省赛：神奇闹钟

思路 python做这题很简单&#xff0c;灵活用datetime库即可 code import os import sys# 请在此输入您的代码 import datetimestart datetime.datetime(1970,1,1,0,0,0) for _ in range(int(input())):ls input().split()end datetime.datetime.strptime(ls[0]ls[1],&quo…...

编程日记 2025/8/13 23:05:49

计算机的结构形式

微机的机构形式 台式个人微机 最开始的微机&#xff08;计算机&#xff09;都是台式的&#xff0c;到目前为止仍是个人微机的主要形式。台式机按照电脑机箱的放置形式&#xff0c;分为卧式和立式两种。台式机需要放在桌面上或者留有专门放置机箱位置&#xff0c;他的主机、键…...

编程日记 2025/8/11 18:21:17

C语言【内存函数】详解

目录&#xff1a; 1. memcpy使用和模拟实现 2. memmove使用和模拟实现 3. memset函数的使用 4. memcmp函数的使用 以上函数均包含在一个头文件<string.h>里面 一、memcpy的使用和模拟实现。 memcpy函数介绍&#xff1a; 函数原型&#xff1a; void * memcpy ( void…...

编程日记 2025/8/13 3:14:07

软考网络安全专业

随着信息技术的迅猛发展&#xff0c;网络安全问题日益凸显&#xff0c;成为社会各界普遍关注的焦点。在这样的背景下&#xff0c;软考网络安全专业应运而生&#xff0c;为培养高素质的网络安全人才提供了有力支撑。本文将对软考网络安全专业进行深入剖析&#xff0c;探讨其在信…...

编程日记 2025/8/12 19:19:45

Altium Designer——CHIP类元器件PCB封装绘制

文章目录 PCB封装组成元素&#xff1a;焊盘的属性 SS34肖特基二极管SMA(DO-214AC)封装绘制资料&#xff1a;步骤&#xff1a;1.绘制焊盘&#xff1a;用到的快捷键&#xff1a;资料&#xff1a; 2.绘制丝印&#xff1a;用到的快捷键&#xff1a;资料&#xff1a; PCB封装组成元素…...

编程日记 2025/8/15 1:15:01

C++ unordered_map unordered_set 模拟实现

1. 关于unordered_map 和 unordered_set 区别于C的另外两个容器map和set&#xff0c;map和set的底层是红黑树&#xff1b;而unordered_map和unordered_set的底层是哈希 因为unordered_map和unordered_set的底层是哈希&#xff0c;因此他们存储的数据是没有顺序​​unordered​…...

编程日记 2025/8/12 12:26:23

Java使用自定义类加载器实现插件动态加载

虚拟机类加载子系统 Java虚拟机的⼀个重要子系统&#xff0c;主要负责将类的字节码加载到JVM内存的⽅法区&#xff0c;并将其转换为JVM内部的数据结构。 一个类从被加载到虚拟机开始&#xff0c;一直到卸载出内存为止&#xff0c;会经历七个阶段&#xff1a;加载&#xff0c;…...

编程日记 2025/8/13 16:11:24

【初级篇】如何使用DeepSeek和Dify构建高效的企业级智能客服系统

在当今数字化时代，企业面临着日益增长的客户服务需求。使用Dify创建智能客服不仅能够提升客户体验，还能显著提高企业的运营效率。关于DIfy的安装部署，大家可以参考之前的文章： 【入门级篇】Dify安装+DeepSeek模型配置保姆级教程_mindie dify deepseek-CSDN博客 AI智能客服…...

编程日记 2025/8/15 1:29:16

Java开发之数据库应用：记一次医疗系统数据库迁移引发的异常：从MySQL到PostgreSQL的“dual“表陷阱与突围之路

记一次医疗系统数据库迁移引发的异常&#xff1a;从MySQL到PostgreSQL的"dual"表陷阱与突围之路 一、惊魂时刻&#xff1a;数据库切换引发的系统雪崩 某医疗影像系统在进行国产化改造过程中&#xff0c;将原MySQL数据库迁移至PostgreSQL。迁移完成后&#xff0c;系…...

编程日记 2025/8/11 13:39:33

Langchian构建代理

文章目录 概要ReAct 代理 ReAct 使用ReAct基本用法提示词模板内存使用迭代使用返回执行每一步情况限制输出行数设置运行超时时间 不使用代理下LLM如何结合工具案例案例2 概要 单靠语言模型无法采取行动 - 它们只输出文本。 LangChain 的一个重要用例是创建 代理。 代理是使用大…...

编程日记 2025/8/11 19:04:43

Vim软件使用技巧

目录 Demo Vim怎么看一个文件的行号&#xff0c;不用打开文件的前提下&#xff1f;进入文件后怎么跳转到某一行? 不打开文件查看行号&#xff08;查看文件的方法&#xff09; 方法1、使用命令行工具统计行数 方法2、通过vim的 - 参数查看文件信息 进入文件后跳转到指定行…...

编程日记 2025/8/10 14:32:57

SQL与NoSQL的区别

以下是SQL与NoSQL数据库的详细对比&#xff0c;涵盖核心特性、适用场景及技术选型建议&#xff1a; 一、核心区别对比 特性SQL&#xff08;关系型数据库&#xff09;NoSQL&#xff08;非关系型数据库&#xff09;数据模型基于表格&#xff0c;严格预定义模式&#xff08;Schem…...

编程日记 2025/8/12 7:54:45

1191：流感传染--BFS

这里写目录标题 题目 解析代码BFS代码 题目 解析 在同一天对一个病原体进行处理时&#xff0c;如果直接更改数组&#xff0c;将直接影响到后续的遍历 方法一&#xff1a;那么我们可以定义一个数组用来存储坐标&#xff1a;vectoir<pair<int,int>>&#xff0c;遍历…...

编程日记 2025/8/8 18:37:48

gfortran编译器调试功能选项

在使用 gfortran 编译器进行调试时&#xff0c;以下选项可以帮助你更好地定位和解决问题&#xff1a; 1. 生成调试信息 -g&#xff1a;生成调试信息&#xff0c;供调试器&#xff08;如 gdb&#xff09;使用。-ggdb&#xff1a;生成更详细的调试信息&#xff0c;优化 gdb 的使…...

编程日记 2025/8/12 1:40:01

小程序配置

注册小程序账号和安装开发工具 参考文档&#xff1a;注册小程序账号和安装开发工具https://blog.csdn.net/aystl_gss/article/details/127878658 HBuilder新建项目 填写项目名称&#xff0c;选择UNI-APP&#xff0c;修改路径&#xff0c;点击创建 manifest.json 配置 需要分别…...

编程日记 2025/8/14 5:25:20

【Linux】进程（1）进程概念和进程状态

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;Linux 目录 前言 一、什么是进程 二、task_struct的内容 三、Linux下进程基本操作 四、父进程和子进程 1. 用fork函数创建子进程 五、进程状态 1. 三种重…...

编程日记 2025/8/13 18:22:59

MySQL(事物下)

目录 一 多版本并发控制&#xff08; MVCC &#xff09;是一种用来解决 读-写冲突 的无锁并发控制 1. 前置知识 示例&#xff1a; 二 Read View 1. 当事物进行快照读(读历史数据)会MySQL会创建一个Read Vidw类对象&#xff0c;用来记录和当前一起并发的事物(活跃的事物)&a…...

编程日记 2025/8/15 15:09:11

Springboot+mybatis实现增删改查效果

我们前面实现了增加效果&#xff0c;现在来写一下修改~我们首先在controller里面写update 接着在service和mapper写方法 最后我们测试一下 没问题~需要注意的是mapper的sql别写错了&#xff01;...

编程日记 2025/7/11 13:03:45

【“以退为进“、“不得已而为之“与“风险对冲“的协同机制】

深度解析&#xff1a;“以退为进”、"不得已而为之"与"风险对冲"的协同机制 一、“以退为进”&#xff1a;空间重构的博弈艺术 1. 三维战略坐标系 权力维度&#xff1a;唐太宗"玄武门之变"后跪哭李渊&#xff0c;通过降维姿态化解道德危机&am…...

编程日记 2025/8/15 18:19:26

AUTOSAR 网络安全 架构

实现AUTOSAR网络安全架构的步骤指南 在当今汽车电子系统中&#xff0c;AUTOSAR&#xff08;AUTomotive Open System ARchitecture&#xff09;正在成为业界标准。结合网络安全要求&#xff0c;我们可以确保汽车在网络通信中保持安全。接下来&#xff0c;我们将讨论如何实现AUT…...

编程日记 2025/8/10 21:13:47

洛谷 P2801 教主的魔法 题解

之前学过 莫队 算法&#xff0c;其运用了分块思想&#xff1b;但是我居然是第一次写纯种的分块题目。 题意 给你一个长度为 n n n 的序列 a a a&#xff08;一开始 ∀ a i ∈ [ 1 , 1000 ] \forall a_i\in[1,1000] ∀ai​∈[1,1000]&#xff09;。要求执行 q q q 次操作&…...

编程日记 2025/8/12 12:49:18

Google最新生图模型Gemini-2.0-Flash-Exp免费用

Google发布新生图模型 Google释放出最新生图模型&#xff0c;在发布说明中提到&#xff1a; 2025年3月12日 在 Gemini-2.0-Flash-Exp 中发布原生图像输出功能 Gemini 2.0 Flash Experimental 模型发布&#xff0c;支持原生图像输出功能。开发者能够使用 Gemini 进行图像输出和…...

编程日记 2025/8/11 5:17:46

windows安装Elasticsearch

下载 下载最新版 https://www.elastic.co/downloads/elasticsearch 下载历史版本 安装 进入bin目录中 成功启动 访问 http://localhost:9200...

编程日记 2025/8/15 13:31:16

vulnhub靶场之stapler靶机

前言 靶机&#xff1a;stapler靶机&#xff0c;IP地址为192.168.10.12 攻击&#xff1a;kali&#xff0c;IP地址为192.168.10.6 靶机采用virtualbox&#xff0c;攻击机采用VMware虚拟机&#xff0c;都采用桥接网卡模式 文章涉及的靶机及工具&#xff0c;都可以自行访问官网或…...

编程日记 2025/8/14 15:52:16

2025年AI搜索引擎开源项目全景指南：从核心框架到生态工具

2025年AI搜索引擎开源项目全景指南&#xff1a;从核心框架到生态工具 在人工智能技术迅猛发展的当下&#xff0c;开源项目已成为构建AI搜索引擎的核心驱动力。本文整理9个具有代表性的开源项目&#xff0c;涵盖搜索框架、扩展生态及底层支持技术&#xff0c;助你快速搭建或优化…...

编程日记 2025/8/14 1:16:15

数字孪生像魔镜，映照出无限可能的未来

在当今科技飞速发展的时代&#xff0c;数字孪生作为一项极具潜力的前沿技术&#xff0c;正逐渐崭露头角&#xff0c;成为众多领域关注的焦点。它犹如一面神奇的魔镜&#xff0c;以数字化的方式精准映照出现实世界中的各种实体与系统&#xff0c;为我们开启了一扇通往无限可能未…...

编程日记 2025/8/13 18:30:14

PDF Reader

Acrobat Reader...

编程日记 2025/7/10 6:32:19

C++友元

1.什么是友元&#xff1f; 当我们需要在类的外部访问该类的私有成员和保护成员时&#xff0c;就可以利用友元来实现这一操作 在类中用 friend 关键字对函数或类进行声明 2.非成员函数友元 友元函数不是当前类的成员函数&#xff0c;而是当前类的外部函数&#xff0c;但是他可以…...

编程日记 2025/7/31 6:56:32

吴恩达机器学习笔记复盘（五）均方误差函数

只讲了线性回归的代价函数。 均方误差&#xff08;Mean Squared Error, MSE&#xff09; 均方误差&#xff08;MSE&#xff09;基于最小二乘法&#xff0c;通过计算预测值与真实值之间差值的平方的平均值来衡量模型的误差。 原理 假设我们有一组数据集&#xff0c;其中是第…...

编程日记 2025/8/14 20:42:58