基于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+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
使用jQuery实现购物车
Oct 29 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JS 事件绑定函数代码
2010/04/28 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
个人贷款承诺书
2014/03/28 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书