基于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实现简单实用的轮播器
May 23 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
详解K-means算法在Python中的实现
2017/12/05 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
找工作最新求职信
2013/12/22 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
努力学习保证书
2015/02/26 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
解决numpy和torch数据类型转化的问题
2021/05/23 Python
Python之matplotlib绘制折线图
2022/04/13 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android