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.3.2 简单实现select二级联动

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

  2. 份-城市，基于jQuery的AJAX二级联动,用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.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, jquery, select二级联动

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

  9. jQuery+php实现二级联动

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

随机推荐

  1. RedHat Linux 5下不能使用fdisk的问题

    最近在用RedHat Linux5的时候,使用fdisk命令,遇到了下面的错误: bash:fdisk:command not found 在网上找了找,解决方案如下: 首先,这个错误的原因是因为fd ...

  2. 小程序中bindtap绑定函数，函数参数event对数据的处理

    WXML: <view id=" bindtap="tapName"> Click me! </view> JS: Page({ tapName: ...

  3. html 列表相关信息

    无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圆标记) 无序列表始于<ul>标签.每个列表项始于<li> <ul>   <li> ...

  4. mongo长连接

    php mongoclient默认都是长连接 mongo close方法可以关闭长连接 redis,mysql 短连接和长连接可选 他们的close方法都不可以关闭长连接

  5. cocos2d-x中用到的一些宏

    最近我们的cocos2d-x游戏项目已经进入了正式开发的阶段了,几个dev都辛苦码代码.cocos2d-x还是一套比较方便的api的,什么action啊.director啊.ccpoint啊都蛮便捷的 ...

  6. Python 字典的增删改查

    dic = {"意大利": "李云龙","美国":"美国往事"} dic["日本"] = " ...

  7. gradle仓库配置

    Android Studio使用Gradle构建app.Gradle的使用非常灵活,其中可以设置使用多种类型的仓库,来获取应用中使用的库文件.  支持的类型有如下几种: 类型 说明 Maven cen ...

  8. SWIFT中函数返回值为Tuple

    在playgroundm内键入以下代码,求一个成绩数组内最大分值和最小分值 func maxminScore(scores:Array<Int>) -> (maxScore:Int, ...

  9. [Spring Boot] Spring Boot启动过程源码分析

    关于Spring Boot,已经有很多介绍其如何使用的文章了,本文从源代码(基于Spring-boot 1.5.6)的角度来看看Spring Boot的启动过程到底是怎么样的,为何以往纷繁复杂的配置到 ...

  10. 转：AMD规范与CMD规范的区别是什么？

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...