<!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. Android，iOS，浏览器打开手机QQ与指定用户聊天界面

    在浏览器中可以通过JS代码打开QQ并弹出聊天界面,一般作为客服QQ使用.而在移动端腾讯貌似没有公布提供类似API,但是却可以使用schema模式来启动手机QQ. 以下为具体代码: 浏览器(包括手机浏览 ...

  2. 批量导出表数据到CSV文件

    需求:把oracle数据库中符合条件的N多表,导出成csv文本文件,并以表名.csv为文件名存放. 实现:通过存储过程中UTL_FILE函数来实现.导出的csv文件放入提前创建好的directory中 ...

  3. Ogre分层渲染 (转)

    Ogre分层渲染 转载请注明出处!http://www.cnblogs.com/pulas 在超大的场景中,如果既想看到近处的物体,又想看到很远的物体,则必须把相机的远近裁剪面距离设得很大.远近裁剪面 ...

  4. Android Activity界面切换添加动画特效

    在Android 2.0之后有了overridePendingTransition() ,其中里面两个参数,一个是前一个activity的退出两一个activity的进入, @Override pub ...

  5. c语言下的通用数据库接口(之sqlite消化，模拟c#,java的反射)

    在java/C#中都有类的反射,而C下是不存在的. java/C#中能够把表设计成类.而C下仅仅能设计成结构体形式. 在java中有hibernate来操作数据库,可是在C以下怎么设计好呢? 如今,我 ...

  6. C语言--enum，typedef enum 枚举类型详解

    原文:http://z515256164.blog.163.com/blog/static/32443029201192182854300/ 有改动 C语言详解 - 枚举类型 注:以下全部代码的执行环 ...

  7. iOS 除去图片的白色背景(接近白色)，或者其它颜色的替换，获取像素点的ARGB值

    iOS 除去图片的白色背景(接近白色),或者其它颜色的替换 方法如下: //去除图片的白色背景 + (UIImage*) imageToTransparent:(UIImage*) image { / ...

  8. Fliptile

      开关题   尺度法  Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 3394   Accepted:  ...

  9. iOS开发：获取设备IP地址

    一.导入头文件 //首先导入头文件信息 #include <ifaddrs.h> #include <arpa/inet.h> #include <net/if.h> ...

  10. template和templateUrl区别与联系

    templateUrl其实根template功能是一样的,只不过templateUrl加载一个html文件,template后面根的是html的标签. .state('menu.about', { u ...