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. SQL2005 安装问题

    1. 单击“开始”,依次指向“程序”.“Microsoft SQL Server 2005”和“配置工具”,然后单击“SQL Server 外围应用配置器”. 2. 在“SQL Server 2005 ...

  2. java.security.cert.CertificateException: No subject alternative names present

    背景:在开发一个项目中,要调用一个webservice服务,之前设置的是http协议,项目中采用jdk自带的wsimport工具生成的客户端代码; 后来,需求变更要求兼容https协议的webserv ...

  3. Java容器——Set接口

    1.定义 set中不允许放入重复的元素(元素相同时只取一个).它使用equals()方法进行比较,如果返回true,两个对象的HashCode值也应该相等. 2.方法 TreeSet中常用的方法: b ...

  4. 使用 PM2 管理nodejs进程

    pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的. 它非常适合IaaS结构,但不要把它 ...

  5. [转]利用docker进行java开发小demo

    http://www.codeceo.com/article/docker-java-development.html

  6. AndroidStudio的transformDexArchiveWithExternalLibsDexMergerForDebug报错解决方案

    错误排查记录. 今天在gradle更新了一个引入包的版本号,然后引发了下面的血案. 报错信息: org.gradle.api.tasks.TaskExecutionException: Executi ...

  7. pymssql

    用与连接sql server数据库的python接口 import pymssql 1.配置信息 conf={ "host": "118.190.41.846:9099& ...

  8. webpack-dev-server将文件产出到指定目录

    默认情况下webpack-dev-server是将文件产出到内存中,写了一个插件 将文件产出到指定目录, 比较简易啊 哈哈哈 使用代码如下 const WebpackDevServerOutput = ...

  9. Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty

    解析神奇的 Object.defineProperty   几行代码看他怎么用   var a= {} Object.defineProperty( a, "b", { value ...

  10. MyEclipse 10 中安装Android ADT 22插件的方法

    MyEclipse 10 中安装Android ADT 22插件的方法 下载ADT包:http://dl.google.com/android/ADT-22.0.0.zip 将ADT-22.0.0.z ...