基于jquery实现二级联动效果


Posted in jQuery onMarch 30, 2017

本文实例为大家分享了jquery实现二级联动的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <title>二级联动</title>
   <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#province").change(function(){
       $("#province option").each(function(i,o){
          if($(this).attr("selected"))
          {
           $(".city").hide();
           $(".city").eq(i).show();
         }
       });
      });
    $("#province").change();
   });
</script>
</head>
<body>
   <select id="province">
    <option>----请选择省份----</option>
    <option>北京</option>
   <option>上海</option>
    <option>江苏</option>
  </select>
  <select class="city">
      <option>----请选择城市----</option>
  </select>
  <select class="city">
    <option>东城</option>
    <option>西城</option>
    <option>崇文</option>
    <option>宣武</option>
    <option>朝阳</option>
  </select> 
<select class="city">
    <option>黄浦</option>
    <option>卢湾</option>
    <option>徐汇</option>
    <option>长宁</option>
    <option>静安</option>
  </select>
  <select class="city">
    <option>南京</option>
    <option>镇江</option>
    <option>苏州</option>
    <option>南通</option>
    <option>扬州</option>
  </select>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
如何编写jquery插件
Mar 29 #jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
You might like
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
php blowfish加密解密算法
2016/07/02 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
详解php反序列化
2020/06/10 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
工程总经理工作职责
2013/12/09 职场文书
房屋出售协议书
2014/04/10 职场文书
廉洁校园实施方案
2014/05/25 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
初中英语教学随笔
2015/08/15 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技
MySQL池化框架学习接池自定义
2022/07/23 MySQL