JQuery省市联动效果实现过程详解

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")

<!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>

步骤分析:

  • 导入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>");
					});
				});
			});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery+php后台实现省市区联动功能示例

    jquery+php后台实现省市区联动功能示例

    本文实例讲述了jquery+php后台实现省市区联动功能.分享给大家供大家参考,具体如下: JS: $("#from_prov_id,#from_city_id").change(function () { var current_prov_id = $(this).val(); var _this = this; $.ajax({ type:'get', url:"{:url('getarea')}?id="+current_prov_id, success:fu

  • jQuery+jsp实现省市县三级联动效果(附源码)

    jQuery+jsp实现省市县三级联动效果(附源码)

    本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法.分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来: 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding=

  • jQuery实现的省市联动菜单功能示例【测试可用】

    jQuery实现的省市联动菜单功能示例【测试可用】

    本文实例讲述了jQuery实现的省市联动菜单功能.分享给大家供大家参考,具体如下: 主要通过 select 下的 option 的 change 事件动态的为市级菜单添加数据. index.html: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript&q

  • 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html> <html> <head> <meta charset=&q

  • 省市区三级联动jquery实现代码

    省市区三级联动jquery实现代码

    最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是这样啦),果断用google,搜出来的博文质量相当高,特此记录记录!!! 对于这个效果,其实我发现主要在于两点:1.jquery的筛选遍历操作:2.存储省.市.区这些数据时候的格式.另外一点是如何将获取得到的数据放到select option中(即下拉框中!) 对于第一个问题的解决,其实熟悉Jquery的博友估计是不难的,主要涉及

  • jQuery ajax实现省市县三级联动

    jQuery ajax实现省市县三级联动

    下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法 第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号 首先我们要建立数据库: 这就是包含省,市,县的数据库. 下面我们就写主页面:sanji.php:

  • jquery+ajax实现省市区三级联动 （封装和不封装两种方式）

    jquery+ajax实现省市区三级联动 （封装和不封装两种方式）

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询市级(如:北京市辖):根据市级的areacode查询区级(如东城区) 第一种方式:没有用到封装,数据读取较慢,可以看看原理,这样在第二种方式封装时就容易多了. 代码如下: <!DOCTYPE html> <

  • jQuery-Citys省市区三级菜单联动插件使用详解

    jQuery-Citys省市区三级菜单联动插件使用详解

    前言 这里分享一个博主写的省市区三级菜单联动插件 - jQuery-Citys,此插件中所有省市区数据均为国家行政区划代码,保证数据真实可靠,插件可以根据默认地区代码或地区名称进行值的初始化操作. 线上演示地址 github地址 演示截图(查看演示效果请点击上方链接): 插件逻辑 这个插件的逻辑主要是根据区划代码来进行省市区的筛选以及分类,因为区划代码的特殊排序博主在里面使用了一些正则来划分不同的省份以及地区,然后通过对三级菜单绑定不同的事件来响应省市区变化的联动效果. 源码解析 这里只展示部分

  • JQuery省市联动效果实现过程详解

    Js相关技术 JS中的数组: ["城市"] new Array() DOM树操作: ​ 创建节点: document.createElement ​ 创建文本节点: document.createTextNode ​ 添加节点: appendChild 需求分析 ​ 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析 准备工作 : 城市信息的数据 添加节点 : appendChild (JS) a. append

  • jQuery动态添加.active 实现导航效果代码思路详解

    jQuery动态添加.active 实现导航效果代码思路详解

     代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接  window.location.pathname: 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同 通过jq包含方法找到相对应的li给他加入active类名 然后..就没有然后了... jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.l

  • 基于jquery实现省市联动效果

    基于jquery实现省市联动效果

    由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo

  • jquery 时间戳转日期过程详解

    jquery 时间戳转日期过程详解

    这篇文章主要介绍了jquery 时间戳转日期过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 搜了一下发现这个时间戳转时间的代码很好用,附上实践的代码 结果如下 代码如下 /** * 时间戳转日期 * @param timestamp * @returns {*} */ function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位

  • 使用jQuery,Angular实现登录界面验证码详解

    使用jQuery,Angular实现登录界面验证码详解

    写在前面: 前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波. 最终实现的效果: 当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作. 整体思路. 1.取四位随机数 2.赋值到验证码的input框里.

  • jQuery正则表达式的使用方法步骤详解

    jQuery正则表达式的使用方法步骤详解

    本文主要和大家分享的就是jQuery学习中正则的使用,正则在jquery里面并没有比JavaScript多哪些知识,基本上是一样的,只是选择器更好了一点,一起来看看吧. 基础正则 1.正则表达式的创建 a) var checkNum = /^[A-Za-z0-9]+$/; b) var re=new RegExp("["+s1+"]","g"); 2.常用规则 a) 用户密码:/^[a-zA-Z][a-zA-Z0-9_]{5,20}$/ b) 邮

  • Android自定义指示器时间轴效果实例代码详解

    Android自定义指示器时间轴效果实例代码详解

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

  • spring cloud alibaba Nacos 注册中心搭建过程详解

    spring cloud alibaba Nacos 注册中心搭建过程详解

    这篇文章主要介绍了spring cloud alibaba Nacos 注册中心搭建过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 nacos下载地址 什么是 Nacos? nacos主要起到俩个作用一个是注册中心,另外一个是配置中心. 下面图 是nacos的功能结构图 运行环境 JDK 1.8+: Maven 3.2.x+: 下载 你可以通过源码和发行包两种方式来获取 Nacos. nacos发行包下载地址 选择版本解压 unzip

  • Java并发编程预防死锁过程详解

    这篇文章主要介绍了Java并发编程预防死锁过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在java并发编程领域已经有技术大咖总结出了发生死锁的条件,只有四个条件都发生时才会出现死锁: 1.互斥,共享资源X和Y只能被一个线程占用 2.占有且等待,线程T1已经取得共享资源X,在等待共享资源Y的时候,不释放共享资源X 3.不可抢占,其他线程不能强行抢占线程T1占有的资源 4.循环等待,线程T1等待线程T2占有的资源,线程T2等待线程T1占有

  • jquery实现搜索框功能实例详解

    搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

随机推荐