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. mysql禁止远程访问的解决办法

      1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 &qu ...

  2. 070——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. POJ 1062 最短路Dijstra

    汉语题... 题意正如你看到的酱... 看的解题报告.思路大概是把每个点看做最高等级.然后枚举所有当前可以访问的点.进行dijstra算法.找到此时到目标点最短路.枚举完之后找到最小的点就可以了. P ...

  4. 关于反射的BindingFlag浅析

    MSDN关于BindingFlag的文档地址:https://msdn.microsoft.com/zh-cn/library/cexkb29a BindFlags作为一个特别的标志量,在反射中通过这 ...

  5. (C/C++学习笔记) 十三. 引用

    十三. 引用 ● 基本概念 引用: 就相当于为变量起了一个别名(alias), △与指针不同的是它不是一个数据类型 通过引用我们可以间接访问变量,指针也能间接访问变量,但引用在使用上相对指针更安全. ...

  6. webservice之wsdl

    最近项目中需要将原来的通信协议改成webservice,由于业务需要,我们需要向server端传送数据,故server方提供给我们一个.wsdl文件,内容如下: WSDL即Web Services D ...

  7. Linux rm的一次误用

    今天在Linux下误用了一次rm -rf,经历惨痛,记录一下. 原因是我删除了一个文件到回收站,然后点错了将home下的所有东西都删到了回收站,然后我又从回收站拷贝回home目录而不是使用恢复,因为h ...

  8. 自定义页签logo

    1.webpack.prod.conf new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.ht ...

  9. 特征工程 —— 特征重要性排序（Random Forest）

    树模型天然会对特征进行重要性排序,以分裂数据集,构建分支: 1. 使用 Random Forest from sklearn.datasets import load_boston from skle ...

  10. C++基础之 成员变量初 始化赋值

    摘要: C++成员变量 初始化赋值 你都清楚吗?还有好多坑,好多细节也不知道... 今天在写一个类的时候,由于该类的一个成员变量是引用,所以初始化出现了问题,查了一下之后,才发现,原来引用的初始化和c ...