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

Js写的二级联动和三级联动

二级联动的实现
第一步
在HTML页面创建两个 select 下拉列表元素,并设置id为 ‘province’和id ‘city’

<!--省份-->
<select id="province" onchange="getCity()"></select><!--城市-->  
<select id="city"><option>请选择</option>
</select>

第二步
在HTML创建js标签 用于写js代码,当然也可以创建一个js文本写js代码,我这里纯属是想偷懒所以直接在html页面使用script标签里面写,效果一样;

好了,不啰嗦,现在开始写js代码

首先我们要创建 javaScript 对象字面量,它是[object literal]的一种形式;是用来创建包含键值对的对象,可以快速地创建和初始化一个对象,不再需要定义一个构造函数!

//省市对应数据
var data = {"北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"],"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"],"广东省": ["深圳市", "广州市", "珠海市", "中山市", "东莞市"]
};

接下来就是for(var key in data)初始化省份

getElementById("xxx") 获取id
createElement("xxx") 创建一个html元素节点
   //初始化省份var province = document.getElementById("province");for (var key in data) {var option = document.createElement("option");option.innerText = key;province.appendChild(option);}

创建函数获取城市

//获取城市function getCity() {var provinceName = province.value;var city = document.getElementById("city");city.innerHTML = "";if (data[provinceName]) {for (var i = 0; i < data[provinceName].length; i++) {var option = document.createElement("option");option.innerText = data[provinceName][i];city.appendChild(option);}}}

写到这里,二级联动也就写完了

三级联动的实现
三级联动的实现要比二级联动实现复杂了一点点,但是,并不算难!

第一
老套路,和上面二级联动一样,先在HTML创建三个 下拉列表

  <select id="province"></select><select id="city"><option>请选择</option></select><select id="district"><option>请选择</option></select>

第二
和上面一样在html创建

var data = {"广东省": {"珠海市": ["香洲区", "斗门区"],"广州": ["番禺", "黄埔"]},"仙侠世界": {"玄幻大陆": ["无敌区", "无人区"],"科技大陆": ["天才区", "学士区"]}
};

1)接下来就是for(var key in data)初始化省份

// 获取省份列表
var province = document.getElementById("province");
for (var key in data) {var option = document.createElement("option");option.text = key;province.add(option);

2)根据省份获取城市列表

// 根据省份获取城市列表
function getCity() {var city = document.getElementById("city");var district = document.getElementById("district");//城市为0,当选择了省份的时候才有数据city.options.length = 0;var selectedProvince = province.options[province.selectedIndex].text;//循环遍历data城市数据到optionfor (var key in data[selectedProvince]) {var option = document.createElement("option");option.text = key;//添加数据city.add(option);}
}

3)根据城市获取区县列表

// 根据城市获取区县列表
function getDistrict() {var district = document.getElementById("district");//区县为0,当选择了城市的时候才有数据district.options.length = 0;//获取城市var selectedProvince = province.options[province.selectedIndex].text;//获取区县var selectedCity = city.options[city.selectedIndex].text;//循环遍历for (var i = 0; i < data[selectedProvince][selectedCity].length; i++) {var option = document.createElement("option");option.text = data[selectedProvince][selectedCity][i];district.add(option);}
}// 函数绑定到省份和城市下拉框的 onchange 事件上
//县列表以便在用户选择不同的省份或城市时自动更新城市和区
province.onchange = getCity;
city.onchange = getDistrict;

相关文章:

Js写的二级联动和三级联动

二级联动的实现 第一步 在HTML页面创建两个 select 下拉列表元素&#xff0c;并设置id为 ‘province’和id ‘city’ <!--省份--> <select id"province" onchange"getCity()"></select><!--城市--> <select id"city&qu…...

一文带你了解UI自动化测试框架

PythonSeleniumUnittestDdtHTMLReport分布式数据驱动自动化测试框架结构 1、Business&#xff1a;公共业务模块&#xff0c;如登录模块&#xff0c;可以把登录模块进行封装供调用 ------login_business.py from Page_Object.Common_Page.login_page import Login_Page from H…...

【Linux】守护进程

守护进程&#xff08;Daemon&#xff09;是一种在后台运行的特殊进程。它通常在操作系统启动时启动&#xff0c;并一直运行直至系统关闭。它不与任何终端关联&#xff0c;并且没有标准输入、输出和错误流。它的主要作用是在系统启动后执行一些特定的任务或者提供某些服务&#…...

Vue中组件和插件有什么区别?

Vue中组件和插件有什么区别&#xff1f; 组件是什么 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念&#xff08;组件&#xff09;来实现开发的模式&#xff0c;在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度&#xff0c;在保持接口…...

第五章 图像处理

文章目录 前言一、图像金字塔1.高斯金字塔2.拉普拉斯金字塔 二、图像轮廓1. 轮廓提取2. 轮廓绘制3. 轮廓特征4. 轮廓近似5. 轮廓标记 三、模板匹配四、直方图1. 对比度2. 绘制直方图3. 均衡化3.1 理论3.2 代码 4. CLAHE 五、图像傅里叶变换5.1 正弦平面波5.2 二维傅里叶变换5.3…...

算法8.从暴力递归到动态规划1

算法|8.从暴力递归到动态规划1 目前感觉&#xff0c;背包问题和货币数组问题本质相同&#xff0c;货币的与dp相关的三种代码写完了&#xff0c;快复习不完了&#xff0c;背包暂时先不写了&#xff0c;回头再写&#xff0c;补充&#xff0c;再总结&#xff0c;结合那个C大神的文…...

8-JDBC 编程

目录 1.数据库编程的必备条件 PS&#xff1a;程序是怎么操作数据库的&#xff1f; 2.什么是JDBC&#xff1f; 2.1.JDBC定义 2.2.JDBC工作原理 3.JDBC使用 3.1.创建项目并添加MySQL驱动包 3.2.使用代码操作数据库 3.2.1.获得数据源 3.2.2.获得连接 3.2.3.获得执行器 …...

零基础如何学习 Web 安全?

Web安全不仅是互联网的核心&#xff0c;而且还是云计算和移动互联网的最佳载体。对于信息安全从业者而言&#xff0c;Web安全是一个非常重要的研究课题之一。 Web应用是指采用B/S架构、通过HTTP/HTTPS协议提供服务的统称。随着互联网的广泛使用&#xff0c;社交网络、聊天工具…...

【简单实用框架】【AddressablesMgr】【可移植】

☀️博客主页&#xff1a;CSDN博客主页&#x1f4a8;本文由 萌萌的小木屋 原创&#xff0c;首发于 CSDN&#x1f4a2;&#x1f525;学习专栏推荐&#xff1a;面试汇总❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&#…...

android 12.0Launcher3禁止拖拽app图标到第一屏

1.概述 在12.0进行定制化开发Launcher3中,会对Launcher3 做些要求,比如现在的需求就是Launcher3第一屏的图标固定,不让其他屏的图标拖动到 第一屏所以说这个需求和 禁止拖拽图标到Hotseat类似,也是从WorkSpace.java里面寻找解决方案 2.Launcher3禁止拖拽app图标到第一屏相…...

SkyLine简介

简介 SkyLine产品系列&#xff08;TerraExplorer 、TerraGate、TerraBuilder&#xff09;是一套优秀的三维数字地球平台软件。凭借其国际领先的三维数字化显示技术&#xff0c;它可以利用海量的遥感航测影像数据、数字高程数据以及其他二三维数据搭建出一个对真实世界进行模拟…...

算法基础学习笔记——④前缀和\差分\双指针\位运算

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨前缀和 ✨一维前缀和 &#x1f353;一维前缀和模板&#xff1a; ✨二维前缀和 &#x1f353;二位前缀和模板&#xff1a; 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需要的看哈O(∩_∩)O&a…...

【Linux系统基础快速入门详解】Linux下安装软件必知必会4种方法(yum,编译安装,rpm包,二进制方式)等详解

在 Linux 下安装软件有多种方法可供选择,常用的包括 yum、编译安装、rpm 包和二进制方式。下面对这些方法进行详细说明: 使用 yum 安装软件yum 是 Red Hat 系列 Linux 发行版中常用的软件包管理工具,通过 yum 可以方便地安装、升级和删除软件包。yum 默认从官方仓库中下载软…...

ASEMI代理长电可控硅BT136参数,BT136规格,BT136说明

编辑-Z 长电可控硅BT136参数&#xff1a; 型号&#xff1a;BT136 RMS通态电流IT(RMS)&#xff1a;6A 非重复浪涌峰值导通电流ITSM&#xff1a;25A 峰值栅极电流IGM&#xff1a;2A 平均栅极功耗PG(AV)&#xff1a;0.5W 存储接点温度范围Tstg&#xff1a;-40 to 150℃ 工…...

代码线程安全

线程生命周期 synchronized synchronized会自动释放锁 synchronized同步代码块 synchronized后面括号里obj是锁对象(保证唯一)&#xff1b;static修饰的obj对象是自定义MyThread线程类的静态成员变量&#xff0c;该自定义线程类所有实例共享保证锁对象唯一性&#xff1b;另一…...

Filebeat技术栈总结

filebeat 是一个轻量型日志采集器&#xff0c;本质上是一个 agent 。不依赖于任何应用&#xff0c;可以安装在任何节点上&#xff0c;可单独使用 Filebeat 并根据配置读取对应位置的日志进行上报和搜集。 filebeat 内置了常用的 output 组件&#xff0c;例如 kafka、ElasticSe…...

【App自动化测试】(十六)健壮性测试工具——Android Monkey

目录 1. 介绍2. 安装3. Monkey的使用4. money常用命令5. 常用事件类型参数6. Monkey使用参考 1. 介绍 Monkey是一个在模拟器或设备上运行的程序&#xff0c;用于生成用户事件的伪随机流。 为什么要使用Monkey这个自动化遍历工具&#xff1f; Monkey解决了一个测试痛点&#xff…...

实现第一个内核程序的Hello World

背景 在内核的开发中&#xff0c;总要先入个门。那么就要来编写第一个内核程序 入门 一个 module_init 程序是Linux内核模块的一部分&#xff0c;通过module_init 方法就能将程序载入内核。 module_init 方法需要以下步骤 编写module_init 的代码&#xff0c;并将其保存为…...

python基于协同过滤推荐算法的电影观后感推荐管理系统的设计

本课题所设计的影单管理系统&#xff0c;使用B/S架构&#xff0c;Python语言进行开发&#xff0c;它的优点代码不能从浏览器查看&#xff0c;保密性非常好&#xff0c;比其他的影单管理更具安全性。Python还容易修改和调试&#xff0c;毕竟影视是在不断发展过程中&#xff0c;难…...

Vue——状态管理库Pinia

写在前面&#xff1a;本文参考小满大牛的pinia专栏 一、Vuex与Pinia Vuex 和 Pinia 均是 Vue.js 的状态管理库&#xff0c;它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。 Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

机器学习的数学基础:线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...