基于jquery实现二级联动效果

 更新时间:2017年03月30日 09:31:03   作者:Marven  
这篇文章主要为大家详细介绍了基于jquery二级联动效果的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 mobile开发常见问题分析

    jquery mobile开发常见问题分析

    这篇文章主要介绍了jquery mobile开发常见问题,结合实例形式分析了jQuery mobile插件使用过程中的常见错误问题与对应的解决方法,需要的朋友可以参考下
    2016-01-01
  • jQuery提示插件qTip2用法分析(支持ajax及多种样式)

    jQuery提示插件qTip2用法分析(支持ajax及多种样式)

    这篇文章主要介绍了jQuery提示插件qTip2用法,结合实例形式分析了qTip2的使用技巧,可支持ajax及多种样式的设置,需要的朋友可以参考下
    2016-06-06
  • jQuery动态添加、删除元素的方法

    jQuery动态添加、删除元素的方法

    添加、删除元素在项目中经常会用到,下面为大家介绍下使用jQuery对元素进行动态添加和删除,具体的实现如下,希望对大家有所帮助
    2014-01-01
  • jquery实现图片切换代码

    jquery实现图片切换代码

    这篇文章主要为大家详细介绍了jquery实现图片切换代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jqeury-easyui-layout问题解决方法

    jqeury-easyui-layout问题解决方法

    jqeury-easyui-layout问题:当把class=“easyui-layout”写在一个独立的div中时,layout的样式无法显示,具体示例如下
    2014-03-03
  • jQuery get和post 方法传值注意事项

    jQuery get和post 方法传值注意事项

    用 jQuery 的都知道,jQuery 的 get 和 post 方法有三个参数:地址,数据 和 回调函数,但我们知道地址也可以跟随数据的(形如:get_data.php?v1=1&v2=2),而且第二个参数可以省略,即第二个参数可以直接写回调函数,那么数据写在地址后面和写在 data 参数里有什么区别呢?
    2009-11-11
  • Jquery Validation插件防止重复提交表单的解决方法

    Jquery Validation插件防止重复提交表单的解决方法

    在项目开发中,测试人员报告缺陷说,即时有表单验证,但是如果快速点击两下“提交”按钮,系统会产生两条相同的记录。
    2010-03-03
  • jQuery实现参数自定义的文字跑马灯效果

    jQuery实现参数自定义的文字跑马灯效果

    这篇文章主要为大家详细介绍了jQuery实现参数自定义的文字跑马灯效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • jQuery-Tools-overlay 使用介绍

    jQuery-Tools-overlay 使用介绍

    jQuery-Tools-overlay 使用介绍,需要的朋友可以参考下
    2012-07-07
  • 使用jQuery动态加载js脚本文件的方法

    使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术。这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js
    2014-04-04

最新评论