基于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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery复选框全选效果如何实现
May 08 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
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php实现读取内存顺序号
2015/03/29 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Python书单 不将就
2017/07/11 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
python实现自动打卡的示例代码
2020/10/10 Python
编写python代码实现简单抽奖器
2020/10/20 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
远程教育学习心得体会
2016/01/23 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电