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编写textarea输入字数限制代码
Mar 23 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
复习Python中的字符串知识点
2015/04/14 Python
python文件的md5加密方法
2016/04/06 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
5.12护士节演讲稿
2014/04/30 职场文书
市场策划求职信
2014/08/07 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年父亲节寄语
2015/03/23 职场文书
学校社团活动总结
2015/05/07 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
python迷宫问题深度优先遍历实例
2021/06/20 Python
配置nginx负载均衡
2022/05/06 Servers