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实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php实现插入排序
2015/03/29 PHP
laravel自定义分页效果
2017/07/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
python实现kMeans算法
2017/12/21 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
error和exception有什么区别
2012/10/02 面试题
Ajax和javascript的区别
2013/07/20 面试题
将相和教学反思
2014/02/04 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
动物科学专业求职信
2014/07/27 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
停课通知书
2015/04/24 职场文书
承诺书范本大全
2015/05/04 职场文书
重阳节简报
2015/07/20 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python