基于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为某个div加入行样式
Jun 09 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery插件实现代码雨特效
Apr 24 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
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
大学校园活动策划书
2014/02/04 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
物业管理专业自荐信
2014/07/01 职场文书
学历证明范文
2015/06/16 职场文书
pandas数值排序的实现实例
2021/07/25 Python