<!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实现2级联动的更多相关文章

  1. Jquery实现两级联动

    最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...

  2. 如何根据Jquery实现两级联动

    <script language="javascript" type="text/javascript" > $(function (){      ...

  3. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  4. JS 实现地区，省份，城市，县区4级联动

    刚学JS,实战一下,做一个省份信息4级联动. 但是网上查了都是3级的,没有4级,现在做一个的是带地区的4级联动,最简单的办法是修改别人的代码,最开始找到的事类似于下边这个的: 省市县关联菜单 < ...

  5. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  6. 基于jQuery+JSON的省市联动效果

    省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...

  7. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  8. Devexpress TreeList选择父级联动

    Treelist当显示复选框后,父级和子级的复选框没有关联,使用过程中很不便,如图所示 自己给treelist添加父子级联动 /// <summary> /// 初始化TreeList,父 ...

  9. 手机端仿ios的省市县3级联动脚本一

    一,图片实例 二,代码 2.1,代码 $('#provinceCity_fu').click(function(){ var $this = $(this); new Picker({ "t ...

随机推荐

  1. 【转】shell脚本处理字符串的常用方法

    转自:http://blog.csdn.net/linfeng999/article/details/6661233 1. 构造字符串 直接构造 STR_ZERO=hello #shell中等号左右的 ...

  2. Java网页数据采集器[上篇-数据采集]【转载】

    开篇 作为全球运用最广泛的语言,Java 凭借它的高效性,可移植性(跨平台),代码的健壮性以及强大的可扩展性,深受广大应用程序开发者的喜爱. 作为一门强大的开发语言,正则表达式在其中的应用当然是必不可 ...

  3. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 分块

    2002: [Hnoi2010]Bounce 弹飞绵羊 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOn ...

  4. Codeforces Gym 100002 C "Cricket Field" 暴力

    "Cricket Field" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1000 ...

  5. POJ 2195 D - Going Home 费用流

    D - Going HomeTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vie ...

  6. Cucumber 入门一

    (转自:http://www.cnblogs.com/jarodzz/archive/2012/07/02/2573014.html) 第一次看到Cucumber和BDD(Behavior Drive ...

  7. 和Timesten有个约会--Timesten技术专栏系列(一)

    作者: 三十而立 时间:2009年10月03日 12:08:42 本文出自 “inthirties(三十而立)”博客,转载请务必注明作者和保留出处http://blog.csdn.net/inthir ...

  8. java spring 使用注解来实现缓存

    这里举例使用spring3.1.4 + ehcache 注解的方式使用cache 是在spring3.1加入的 使用方法: 1.ehcache依赖+spring依赖 <!-- ehcache依赖 ...

  9. leetcode -- Search for a Range (TODO)

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  10. PS将图标变灰

    方法一:直接去色,图像——调整——去色:快捷键ctrl+shift+U 方法二:图像——调整——灰白:快捷键shift+ctrl+alt+B;