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. Android 时钟(由秒转变为时分秒)

    int second = 0: Handler handler = new Handler(); handler.post(runnable); Runnable runnable = new Run ...

  2. exec可以用来执行语句的

    set @sql='select * from '+@table print @sql exec(@sql)

  3. forget word qz_out_b1

    1★ be bi prep 使~成为:   2★ bene b əni 好,善 :祈祷     3★ bi 2, 双重, 两个 bi   4★ by   b æ / 通过,在~之前  

  4. 蓝桥杯—ALGO-12 幂方分解(递归递推)

    问题描述 任何一个正整数都可以用2的幂次方表示.例如: 137=27+23+20 同时约定方次用括号来表示,即ab 可表示为a(b). 由此可知,137可表示为: 2(7)+2(3)+2(0) 进一步 ...

  5. Using XmlHttpRequest 写JSON网页

    代码如下-----xmlhttprequest.responseJSON: <!DOCTYPE html> <html> <head> <meta chars ...

  6. 深入理解java异常【绝对经典，推荐最少看五遍】

    http://blog.csdn.net/hguisu/article/details/6155636 补充:检查异常(checkedException)与运行异常,什么时候throw,什么时候thr ...

  7. 在电脑用Chrome运行安卓apk程序[ARC Welder]

    chrome好用,但要FQ. 为了某些特别有意思的功能,FQ也要实现它. 这个就是:在chrome中使用android APP 一:系统需求: chrome浏览器 梯子(就是FQ,因为我们要去goog ...

  8. 《Python》 文件操作

    一.文件操作基本流程: 1.文件基本操作初识: 打开文件: 文件句柄 = open(‘文件路径’,‘编码方式’,‘打开方式’) 第一种:f = open('d:\'a.txt',encoding='u ...

  9. Numpy 函数总结 (不断更新)

    本篇主要收集一些平时见到的 Numpy 函数. numpy.random.seed & numpy.random.RandomState np.random.seed() 和 np.rando ...

  10. HTTPS 通俗简介

    为什么需要HTTPS 9个问题搞懂 https 来源 HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理 等. 举个最常见的例 ...