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操作)的更多相关文章

  1. Ajax jQuery下拉框联动案例

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

  2. jQuery Ajax MVC 下拉框联动

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

  3. SSM框架，在Html界面利用ajax，json，jQuery实现省市区下拉框联动

    1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...

  4. jquery 下拉框 收藏

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

  5. Java Swing应用程序 JComboBox下拉框联动查询

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

  6. html年月日下拉联动菜单 年月日三下拉框联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 月薪10K必备--C#下拉框联动

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

  8. Ext 下拉框联动第一次显示不正常的问题

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

  9. 带搜索框的jQuery下拉框插件

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

随机推荐

  1. C# 自定义控件容器，设计时可添加控件

    本分步指南介绍在将 UserControl 放在 Windows 窗体上之后,如何将 UserControl 对象用作设计时控件容器.可能会有这样的情况:您想将一个控件拖到 UserControl 中 ...

  2. 题解 CF1131C 【Birthday】

    CF大水题 题意:给你n个人,他们的身高是a[i],让你将这几个人排成一个环,使得他们两两之间身高差的和最小. 思路:简单到爆了,恶意评分上蓝.直接将那几个人排个序,然后按序左右放就行了,也就是说1号 ...

  3. [noip2014]P2312 解方程

    P2312 解方程 其实这道题就是求一个1元n次方程在区间[1, m]上的整数解. 我们枚举[1, m]上的所有整数,带进多项式中看看结果是不是0即可. 这里有一个技巧就是秦九韶算法,请读者自行查看学 ...

  4. LoadRunner之Block

    如何在一个脚本中实现不同事务不同次数的循环呢? 案例:假如你想在一个脚本中,实现登录执行1次,查询执行2次,插入执行3次,怎么办?录3个脚本?每个事务分别在脚本中复制N次? 当然不用,LR早就想到了你 ...

  5. Win7 + Ubuntu 14.04 +tomcat + mysql 搭建测试环境手册

    一.Win7下做安装ubuntu 下载ununtu14.04和EasyBCD软件 Win7下要腾出一个盘来安装ubuntu.我是格式化掉F盘,然后回到桌面,右键点击计算机-->管理-->存 ...

  6. zabbix WebUI自定义Nginx监控项模板

    zabbix webUI自定义Nginx监控项模板 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建模板 1>.如下图所示,依次点击"配置" --- ...

  7. L1-046. 整除光棍（模拟除法）

    题意: 这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可以被13整除. 现在, ...

  8. Python面试常问的10个问题

    很多人想找Python工作,面试往往在基础知识点采坑了 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试 ...

  9. 013、MySQL取本月最后日期，取每个月的最后一天日期

    #取本月最后一天 SELECT last_day( curdate( ) ); #取上个月最后一天 , INTERVAL MONTH ) ); , INTERVAL MONTH ) ); , INTE ...

  10. 007.Delphi插件之QPlugins，插件的卸载和重新加载

    效果图如下,可以反复卸载和重新加载.QPlugins这个插件,还没弄明白,摸索着跟着DEMO写 主窗口代码如下 unit Frm_Main; interface uses Winapi.Windows ...