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插件
Mar 29 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现计算器功能
Oct 19 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实现163邮箱自动发送邮件
2016/03/29 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
前端性能优化建议
2020/09/17 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Python安装使用Scrapy框架
2022/04/12 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL