<!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. 2015南阳CCPC E - Ba Gua Zhen 高斯消元 xor最大

    Ba Gua Zhen Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 无 Description During the Three-Kingdom perio ...

  2. glsl水包含倒影的实现(rtt) [转]

    转自 http://blog.sina.com.cn/s/blog_78ea87380101eixi.html 此文实现一个简单地水面倒影效果,通过rtt相机 获取倒影纹理, 水的基本实现方法(参考前 ...

  3. iOS开发——UI_swift篇&UITableView实现单元格展开与隐藏

    UITableView实现单元格展开与隐藏  关于UITableView的展开的收缩在前面的文章我已经结束,就是使用代理,通知,block传值的时候实现的,当时是使用一个Bool值来实现,最后使用着三 ...

  4. 【Github教程】史上最全github用法：github入门到精通

    原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句"Hello Github". ...

  5. Python学习 之 函数

    1.为什么要使用函数 (1)降低编程难度:将复杂的问题分解成简单的小问题 (2)代码重用 2.函数的定义 def 函数名(参数列表):#可以没有参数 函数体 3.函数缺省参数(默认参数):设置默认参数 ...

  6. Google搜索语法

    原文:http://www.jianshu.com/p/37fe4f1381ef 前言 之前听过一个笑话,有人打开浏览器,输入www.baidu.com, 然后搜索框输入Google,查询google ...

  7. Kruskal算法 Swordfish

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=203 Swordfish Time Limit: 2 Seconds      ...

  8. uva10004 Bicoloring 黑白染色问题，DFS

    又是水题,最近切题目只能切出水题...orz 给出一个联通图,要求在个点上染上两种颜色,相邻的点颜色不能相同,看能不能染色成功. 用dfs搜索一个点的每条边,着色递归,如果已经染过色的且颜色出现矛盾就 ...

  9. fancybox的使用

    fancybox,个人没有深入了解,只是为了工作需要,做的一些界面,主要是用的AJAX功能. 首先,需要下载fancybox的js文件以及CSS文件(可能用不到) 其次,在页面中引入 <scri ...

  10. vsftp安装与配置

    配置参考:https://help.aliyun.com/knowledge_detail/5973912.html?spm=5176.776701992.0.0.3X2PB8 553 Could n ...