基于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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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
日本十大惊悚动漫
2020/03/04 日漫
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python操作mysql数据库
2017/03/05 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python flask实现分页的示例代码
2018/08/02 Python
Python 3.8 新功能全解
2019/07/25 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
基于python实现学生信息管理系统
2019/11/22 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
建筑管理专业求职信
2014/07/28 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2014年领班工作总结
2014/11/25 职场文书
贫困证明书范文
2015/06/16 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript