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

JavaScript最新实现城市级联操作,json格式的数据

前置知识:

        <button onclick="doSelect()">操作下拉列表</button><hr>学历:<select id="degree"><option value="0">--请选择学历--</option><option value="1">专科</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>

 点击按钮:添加新的选项框Option

            /*** 添加一个option*/ //方式1// var option = document.createElement('option')// option.value = 5;// option.innerText = '博士后';// degree.appendChild(option);//方式2var option = new Option('博士后',5);degree.add(option)

 Json的相关知识:

JavaScript Object Notation 是一种轻量级的数据交换格式,用于表示JavaScript对象的一种方式

采用与编程语言无关的文本格式,易于阅读和编写,同时也易于解析和生成。

 /*** 定义一个json对象*/var user = {"id":1001,"name":"tom","age":20,"height":175,"address":{"province":"江苏省","city":"南京市","distinct":"秦淮区"}} console.log(user.name);console.log(users);console.log(user.height)console.log(user.address.province);console.log(user.address.city);console.log(user.address.distinct);

有了以上知识,就可以实现该功能了:

 首先需要引入json数据:JOSN最新省、市、县(区)数据

这是我的文件格式:

json数据: 

引入json对象:

  <script src="json/province.json"></script>

body:标签里面的内容:

    省份:<select id="provinceId"><option value="0">--请选择省份--</option></select>城市:<select id="cityId"><option value="0">--请选择城市--</option></select>区域:<select id="areasId"><option value="0">--请选择区域--</option></select>
<script>/*** 实现二级联动的效果*/console.log(provinces);// console.log(provinces[0].title);// console.log(provinces.length);//获取省份属性var province = document.getElementById('provinceId');var city = document.getElementById('cityId');var area = document.getElementById('areasId');for (let i = 0; i < provinces.length; i++) {var option = new Option(provinces[i].title, provinces[i].code);province.add(option);}//获取城市属性//获取省份被选中的code// province// 为省份下拉列表添加事件监听器var citiesArr;province.addEventListener('change', () => {for (let i = 0; i < provinces.length; i++) {if (province.value == provinces[i].code) {var citiesArr = provinces[i].city;}}//清空上次级联列表city.length = 1;for (let j = 0; j < citiesArr.length; j++) {var option = new Option(citiesArr[j].title, citiesArr[j].code)city.add(option);}})//获取地区var areasArr;city.addEventListener('change', () => {for (let i = 0; i < provinces.length; i++) {if (province.value == provinces[i].code) {var citiesArr = provinces[i].city;// console.log(city.value);// console.log(provinces[i].city[0].area);// console.log(provinces[i].code);for (let j = 0; j < citiesArr.length; j++) {if (city.value == citiesArr[j].code) {// console.log(citiesArr[j].area);areasArr = citiesArr[j].area;console.log(areasArr);}}}}//清空上次级联列表area.length = 1;for (let i = 0; i < areasArr.length; i++) {var option = new Option(areasArr[i].title, areasArr[i].code);area.add(option);}})</script>

实现效果如下:

相关文章:

JavaScript最新实现城市级联操作,json格式的数据

前置知识&#xff1a; <button onclick"doSelect()">操作下拉列表</button><hr>学历&#xff1a;<select id"degree"><option value"0">--请选择学历--</option><option value"1">专科<…...

SD NAND:为车载显示器注入智能与安全的心脏

SD NAND 在车载显示器的应用 在车载显示器上&#xff0c;SD NAND&#xff08;Secure Digital NAND&#xff09;可以有多种应用&#xff0c;其中一些可能包括&#xff1a; 导航数据存储&#xff1a; SD NAND 可以用于存储地图数据、导航软件以及车载系统的相关信息。这有助于提…...

矩阵的对角化

概述 对角化矩阵是线性代数中的一个重要概念&#xff0c;它涉及将一个方阵转换成一个对角阵&#xff0c;这个对角阵与原矩阵相似&#xff0c;其主要对角线上的元素为原矩阵的特征值。这样的转换简化了很多数学问题&#xff0c;特别是线性动力系统的求解和矩阵的幂运算。下面是…...

React编写组件时,如何省略.tsx后缀

省略.tsx后缀 当tsconfig.json配置了&#xff0c;需要重启后才会生效 {"compilerOptions": {"allowJs": true,"jsx": "react-jsx",} }当进行以上配置后&#xff0c;导入组件时添加后缀&#xff0c;Eslint报错如下&#xff1a; An im…...

移动端的React项目中如何配置自适应和px转rem

创建项目 create-react-app project-name 启动项目 npm start 下载自适应和px转rem的插件 自适应的&#xff1a; npm install lib-flexible --save px转rem的&#xff1a;npm install postcss-pxtorem5.1.1 --save-dev 创建craco.config.js配置文件 在package.json中…...

TypeScript 结合 React 开发时候 , React.FunctionComponent 解释

在 TypeScript 结合 React 开发时&#xff0c;React.FC&#xff08;或 React.FunctionComponent&#xff09;是一个泛型类型&#xff0c;它用于定义函数组件的类型。这个类型定义了函数组件的结构和预期行为&#xff0c;并且提供了泛型支持&#xff0c;以便你可以指定组件 prop…...

2280. 最优标号(最小割,位运算)#困难,想不到

活动 - AcWing 给定一个无向图 G(V,E)&#xff0c;每个顶点都有一个标号&#xff0c;它是一个 [0,2^31−1] 内的整数。 不同的顶点可能会有相同的标号。 对每条边 (u,v)&#xff0c;我们定义其费用 cost(u,v) 为 u 的标号与 v 的标号的异或值。 现在我们知道一些顶点的标号…...

RestTemplate启动问题解决

⭐ 作者简介&#xff1a;码上言 ⭐ 代表教程&#xff1a;Spring Boot vue-element 开发个人博客项目实战教程 ⭐专栏内容&#xff1a;个人博客系统 ⭐我的文档网站&#xff1a;http://xyhwh-nav.cn/ RestTemplate启动问题解决 问题&#xff1a;在SpringCloud架构项目中配…...

Docker部署前后端服务示例

使用Docker部署js前端 1.创建Dockerfile 在项目跟目录下创建Dockerfile文件&#xff1a; # 使用nginx作为基础镜像 FROM nginx:1.19.1# 指定工作空间 WORKDIR /data/web# 将 yarn build 打包后的build文件夹添加到工作空间 ADD build build# 将项目必要文件添加到工作空间&a…...

方格分割644--2017蓝桥杯

1.用dfs解决&#xff0c;首先这题的方格图形就很像一个走迷宫的类型&#xff0c;迷宫想到dfs&#xff0c;最中心点视为起点&#xff0c;起点有两个小人在这个方格里面对称行动&#xff0c;直到走出迷宫&#xff08;一个人走出来了另一个人就也走出来了&#xff0c;而走过的点会…...

接口测试用例设计注意点

API接口测试&#xff1a; 1>根据接口文档&#xff0c;检查接口调用方法post/get&#xff0c;状态码、请求值、返回值 2>对请求参数做容错、边界值、等价类校验 3>功能可用&#xff0c;用户友好 4>密码加密&#xff0c;http明文&#xff0c;https协议密文 5>业务…...

学习linux从0到工程师(命令)-4

基本命令 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作系统信息 arch 显示机器的处理器架构 uname -m 显示机器…...

【树莓派系统配置+python3.8+环境配置踩坑点汇总】raspberrypi

最近又开始搞树莓派的深度学习模型。很多windows端的环境需要在树莓派上重新部署&#xff0c;中间出现了非常多的问题。主要以各种库的下载安装为主要。 首先&#xff0c;第一个问题&#xff1a; 树莓派系统烧录之后&#xff0c;默认apt一般需要升级看&#xff0c;而默认下载…...

CTFHUB--文件包含漏洞--RCE

文件包含漏洞 文件包含漏洞也是一种注入型漏洞&#xff0c;其本质就是输入一段用户能够控制的脚本或者代码&#xff0c;并让服务端执行。有时候由于网站功能需求&#xff0c;会让前端用户选择要包含的文件&#xff0c;而开发人员又没有对要包含的文件进行安全考虑&#xff0c;…...

Android 解决引入的三方库中类名冲突问题

参考&#xff1a; Android开发——如何解决三方库中的类名冲突问题_android 类冲突-CSDN博客 Android 解决 jar/aar 包类名冲突 - 简书 实操步骤 1.提前安装好unzip-5.51-bin&#xff0c;proguard-7.4.0&#xff0c;jarjar-1.4软件 2.解压包名冲突的 AAR 文件 进入到需要修…...

扩展学习|大数据分析的现状和分类

文献来源&#xff1a;[1] Mohamed A , Najafabadi M K , Wah Y B ,et al.The state of the art and taxonomy of big data analytics: view from new big data framework[J].Artificial Intelligence Review: An International Science and Engineering Journal, 2020(2):53. 下…...

java学习笔记-初级

完整笔记下载链接&#xff1a;https://download.csdn.net/download/qq_48257021/88800766?spm1001.2014.3001.5503 一、变量 1.双标签 <!-- 外部js script 双标签 --><script srcmy.js></script> 在新文件my.js里面写&#xff1a; 2.字符串定义&#xff…...

使用axios 封装大文件上传,支持断点续传的功能

使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能 简介 在许多应用程序中&#xff0c;我们经常需要上传大文件。但是&#xff0c;由于网络连接不稳定或其他原因&#xff0c;上传过程可能会中断。为了解决这个问题&#xff0c;我们可以使用断点续传功能。断点续传允许…...

在python中,设置json支持中文字符串

# 省略以上环节 ... # 假设json格式如下 system_info_dict {uptime: uptime.split(".")[0],cpu_usage: cpu_usage,memory_usage: memory_usage,disk_usage: disk_usage,battery_percentage: battery_percentage,battery_status: batteryStatus }# 设置json支持中文字…...

qnx du统计目录大小单位

在qnx上使用du命令统计目录大小时&#xff0c;发现统计数值与实际大小不一样。 比如目录下有个已知1gb大小的问题&#xff0c;但du统计出来的值跟1gb差太多了 # ls -al total 2097169 drwxrwxrwx 2 root root 4096 Jan 01 00:21 . drwxrwxrwx 6 root …...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...