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插件之validation插件
Mar 29 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery实现鼠标滑动切换图片
May 27 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 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
python多线程http下载实现示例
2013/12/30 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python反射的用法实例分析
2018/02/11 Python
pytorch 数据集图片显示方法
2018/07/26 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
详解python 爬取12306验证码
2019/05/10 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
什么是lambda函数
2013/09/17 面试题
医药类个人求职的自我评价
2014/02/12 职场文书
员工合理化建议书
2014/05/19 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年体育部工作总结
2015/04/02 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫