正文

jQuery下拉框联动(JQ遍历&JQ中DOM操作)

IP云V管理员/2022-12-02/3 阅读

12/02

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796

2.代码实现：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript" src="../js/jquery-3.3.1.js.css" ></script>

		<script>

			/*

				准备工作 : 准备数据

			*/

			var provinces = [

				["深圳市","东莞市","惠州市","广州市"],

				["长沙市","岳阳市","株洲市","湘潭市"],

				["厦门市","福州市","漳州市","泉州市"]

			];

			/*

			1. 导入JQ的文件

			2. 文档加载事件:页面初始化

			3. 进一步确定事件:  change事件

			4. 函数: 得到当前选中省份

			5. 得到城市, 遍历城市数据

			6. 将遍历出来的城市添加到城市的select中

			*/

			$(function(){

				$("#province").change(function(){

//					alert(this.value);

					//得到城市信息

					var cities = provinces[this.value];

					//清空城市select中的option

					/*var $city = $("#city");

					//将JQ对象转成JS对象

					var citySelect = $city.get(0)

					citySelect.options.length = 0;*/

					$("#city").empty();  //采用JQ的方式清空

					//遍历城市数据

					$(cities).each(function(i,n){

						$("#city").append("<option>"+n+"</option>");

					});

				});

			});

		</script>

	</head>

	<body>

		<!--选择省份-->

		<select id="province">

			<option value="-1">--请选择--</option>

			<option value="0">广东省</option>

			<option value="1">湖南省</option>

			<option value="2">福建省</option>

		</select>

		<!--选择城市-->

		<select id="city">

		</select>

	</body>

</html>

jQuery下拉框联动(JQ遍历&JQ中DOM操作)的更多相关文章

Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

SSM框架，在Html界面利用ajax，json，jQuery实现省市区下拉框联动
1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...

jquery 下拉框收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...

html年月日下拉联动菜单年月日三下拉框联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

月薪10K必备--C#下拉框联动
下拉框联动很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...

Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...

带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

随机推荐

dateDiff 用法
SELECT DATEDIFF(yy,'2018-3-10 16:40:00',getdate())SELECT DATEDIFF(mm,'2018-3-10 16:40:00',getdate()) ...

leetcode347 Top K Frequent Elements
""" Given a non-empty array of integers, return the k most frequent elements. Example ...

NodeJs koa2实现文件上传
[转载自:]https://www.jianshu.com/p/34d0e1a5ac70 知识讲解 koa2框架是一个基于中间件的框架,也就是说,需要使用到的功能,比如路由(koa-router),日 ...

Ubuntu 移植 ffmpeg + x264
背景直接编译移植的ffmpeg是与 arm-linux 下类似的. 详情参考: arm linux 移植 FFMPEG库 + x264 host平台 :Ubuntu 16.04 x264 :2017 ...

java 十大经典排序算法
十大排序算法可以说是每个程序员都必须得掌握的了,花了一天的时间把代码实现且整理了一下,为了方便大家学习,我把它整理成一篇文章,每种算法会有简单的算法思想描述,为了方便大家理解,我还找来了动图演示:这还 ...

Windows驱动开发-r3和r0通信
用户部分代码: int main() { HANDLE hDevice = CreateFile(L, NULL, OPEN_EXISTING, FILE_ATTRIBUTE_NORMAL, NULL ...

Windows系统查看端口被那些进程使用
Windows系统查看端口被那些进程使用注:当前Windows为虚拟机环境1. 打开命令提示符:开始-运行-cmd2. 列出使用端口的PID: netstat -abno -a 显示所有连接和侦听端口 ...

Java的SPI机制
目录 1. 什么是SPI 2. 为什么要使用SPI 3. 关于策略模式和SPI的几点区别 4. 使用介绍或者说约定 4.1 首先介绍几个名词 4.2 约定 5. 具体的demo实现 5.1 创建服务提 ...

[Android]如何导入已有的外部数据库
转自:http://www.cnblogs.com/xiaowenji/archive/2011/01/03/1925014.html 我们平时见到的android数据库操作一般都是在程序开始时创建一 ...

POJ 2823 滑动窗口单调队列模板
我们从最简单的问题开始: 给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求: f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0 ...

相关阅读

目录[+]