JQuery省市联动效果实现过程详解


Posted in jQuery onMay 08, 2020

Js相关技术

JS中的数组: ["城市"]

new Array()

DOM树操作:

  • ​ 创建节点: document.createElement
  • ​ 创建文本节点: document.createTextNode
  • ​ 添加节点: appendChild

需求分析

​ 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析

准备工作 : 城市信息的数据

添加节点 : appendChild (JS)

a. append : 添加子元素到末尾

$("#div1").append("<font color='red'>this is replacing text</font>")

b. appendTo : 给自己找一个爹,将自己添加到别人家里

$("#div1").prepend("<font color='red'>this is replacing text</font>")

和第一个效果一样

c. prepend : 在子元素前面添加

$("#div1").after("<font color='red'>this is replacing text</font>")

d. after : 在自己的后面添加一个兄弟

$("<font color='red'>this is replacing text</font>").appendTo("#div1")

JQuery省市联动效果实现过程详解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
  <script>

    $(function () {
      $("#btn1").click(function () {
        // $("#div1").append("<font color='red'>this is replacing text</font>")
        // $("#div1").prepend("<font color='red'>this is replacing text</font>")
        $("#div1").after("<font color='red'>this is replacing text</font>")
        // $("<font color='red'>this is replacing text</font>").appendTo("#div1")
      });
    });
  </script>
</head>
<body>

<input type="button" value="click me, replace text" id="btn1">

<div id="div1">this is a text that will be replaced!</div>

</body>
</html>

遍历的操作:

<script>
   var cities = ["深圳市", "东莞市", "惠州市", "广州市"];
   $(cities).each(function (i, n) {
     console.log(i + "====" + n);
   })
   $.each(cities, function (i, n) {
     console.log(i + ">>>>" + n);
   })
 </script>

JQuery省市联动效果实现过程详解

步骤分析:

  • 导入JQ的文件
  • 文档加载事件:页面初始化
  • 进一步确定事件: change事件
  • 函数: 得到当前选中省份
  • 得到城市, 遍历城市数据
  • 将遍历出来的城市添加到城市的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>");
					});
				});
			});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jquery实现手风琴案例
May 04 #jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
You might like
mysql时区问题
2008/03/26 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python 性能优化技巧总结
2016/11/01 Python
python学生管理系统学习笔记
2019/03/19 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
详解python中的模块及包导入
2019/08/30 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server