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 23 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery实现评论模块
Aug 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python八皇后问题的解决方法
2018/09/27 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
男性健康日的活动方案
2014/08/18 职场文书
国庆促销活动总结
2014/08/29 职场文书
教师工作失职检讨书
2014/09/18 职场文书
实习指导教师评语
2014/12/30 职场文书
python利用while求100内的整数和方式
2021/11/07 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript