jquery实现select二级联动

时间：2022-05-09 22:19:01

jquery实现一个简单的select二级联动菜单，代码如下

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>jQuery 二级联动</title>

     <style>

         .city{

             display: none;;

         }

         .city_first {

             display: block;

         }

     </style>

     <script src="jquery/jquery-1.11.3.min.js"></script>

     <script>

         $(document).ready(function(){

             $("#province").change(function(){

                 var index = $(this).get(0).selectedIndex;

                 $('.city').hide().eq(index).show();

             });

         });

     </script>

 </head>

 <body>

 <select id="province">

     <option>----请选择省份----</option>

     <option>北京</option>

     <option>上海</option>

     <option>江苏</option>

 </select>

 <select class="city city_first">

     <option>----请选择城市----</option>

 </select>

 <select class="city">

     <option>----请选择城市----</option>

     <option>东城</option>

     <option>西城</option>

     <option>崇文</option>

     <option>宣武</option>

     <option>朝阳</option>

 </select>

 <select class="city">

     <option>----请选择城市----</option>

     <option>黄浦</option>

     <option>卢湾</option>

     <option>徐汇</option>

     <option>长宁</option>

     <option>静安</option>

 </select>

 <select class="city">

     <option>----请选择城市----</option>

     <option>南京</option>

     <option>镇江</option>

     <option>苏州</option>

     <option>南通</option>

     <option>扬州</option>

 </select>

 </body>

 </html>

jquery实现select二级联动的更多相关文章

  1. jQuery 1&period;3&period;2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  2. 份-城市，基于jQuery的AJAX二级联动&comma;用Struts2整合AJAX【非数据库版】

    package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...

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

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

  4. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  5. Asp&period;Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  6. 纯js做的select二级联动

    分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤   做一个简单的html页面,用于显示select联动,如图所示:   设置js,点击一级选择项时,创建其下对应的二 ...

  7. element-ui select 二级联动

    在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同)  两个输入框代码 <el-form :inline="tru ...

  8. Struts2&comma; jquery&comma; select二级联动

    1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...

  9. jQuery&plus;php实现二级联动

    public function liandong(){ $arr = Db::table("city")->where("pid=0")->sele ...

随机推荐

  1. 程序员眼中的 SQL Server－执行计划教会我如何创建索引？

    先说点废话 以前有 DBA 在身边的时候,从来不曾考虑过数据库性能的问题,但是,当一个应用程序从头到脚都由自己完成,而且数据库面对的是接近百万的数据,看着一个页面加载速度像乌龟一样,自己心里真是有种挫 ...

  2. TestNG教程

    TestNG教程 http://www.yiibai.com/testng/2013/0916311.html TestNG,3种执行方式: 1.ant(build.xml) 2.Eclipse(安装 ...

  3. EBS Technology Codelevel Checker &lpar;ETCC&rpar;

    ETCC提供了两个脚本,用来帮助用户检测 E-Business Suite Release 12.2数据库和中间层是否安装了必须的补丁.官方强烈推荐使用. 1.checkDBpatch.sh 这个脚本 ...

  4. &lbrack;转&rsqb; Android实时抓包分析 &colon; 善用adb调试桥

    Android实时抓包分析 : 善用adb调试桥   谈到android网络抓包,很多人都能想到牛逼轰轰的神器tcpdump.方法就是在android机器上面安装tcpdump,然后通过-w参数把抓包 ...

  5. C&num;将DataTable转换成list的方法

    本文实例讲述了C#将DataTable转换成list及数据分页的方法.分享给大家供大家参考.具体如下: /// <summary>   /// 酒店评论列表-分页  /// </su ...

  6. 定时组件quartz系列&lt&semi;一&gt&semi;模拟定时组件小程序

    一.核心概念 Quartz的原理不是很复杂,只要搞明白几个概念,然后知道如何去启动和关闭一个调度程序即可. 1.Job表示一个工作,要执行的具体内容.此接口中只有一个方法void execute(Jo ...

  7. LoadRunner--内存指标介绍

    Threads——线程数当前全部线程数============================================ Available MBytes——物理内存的可用数指计算机上可用于运行 ...

  8. Visual Studio 2015 与GitLab 团队项目与管理【2】

    前一篇介绍了Git服务器的搭建,我采用的是CentOS7-64位系统,git版本管理使用的是GitLab,创建管理员密码后进入页面. 创建Users,需要记住Username和邮箱,初始密码可以由管理 ...

  9. 自己动手实现Queue

    前言: 看到许多面经说,有时候面试官要你自己当场用模板写出自己的vector容器.于是,我也琢磨着怎么自己动手写一个,可是本人才刚刚学C++模板编程不久,会的不多.不过,我恰好在C++ Primer上 ...

  10. python基础：映射和集合类型

    python字典的迭代器遍历 字典有一个方法可以返回该字典的迭代器,这个方法就是: dict. iteritems() 当在字典中增加或者删除字典entry的时候,迭代器会失效的,类似于C++的stl ...

相关文章