jQuery 二级联动

----请选择省份----
北京
上海
江苏

----请选择城市----

东城
西城
崇文
宣武
朝阳

黄浦
卢湾
徐汇
长宁
静安

南京

镇江
苏州
南通
扬州

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

 <html xmlns="http://www.w3.org/1999/xhtml">   

<head>   

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   

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

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>  

 <script type="text/javascript">   

 var currentShowCity=0;  

 $(document).ready(function(){  

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

       $("#province option").each(function(i,o){  

          if($(this).attr("selected"))  

           {  

             $(".city").hide();  

               $(".city").eq(i).show();  

                currentShowCity=i;  

           }  

        });

   });  

    $("#province").change();  

});  

 function getSelectValue(){  

     alert("1级="+$("#province").val());  

     $(".city").each(function(i,o){  

          if(i == currentShowCity){  

            alert("2级="+$(".city").eq(i).val());  

          }  

    });  

}  

 </script>   

 </head>   

<body>   

   <select id="province">   

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

       <option>北京</option>   

        <option>上海</option>   

        <option>江苏</option>   

    </select>   

    <select class="city">   

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

    </select>   

    <select class="city">   

        <option>东城</option>   

        <option>西城</option>   

        <option>崇文</option>   

        <option>宣武</option>   

        <option>朝阳</option>   

    </select>    

    <select class="city">   

        <option>黄浦</option>   

       <option>卢湾</option>   

        <option>徐汇</option>   

        <option>长宁</option>   

       <option>静安</option>   

   </select>   

   <select class="city">   

        <option>南京</option>   

        <option>镇江</option>   

       <option>苏州</option>   

       <option>南通</option>   

     <option>扬州</option>   

    </select>   

<INPUT TYPE="button" VALUE="点我" ONCLICK="getSelectValue();">  

 </body>   

</html>

---恢复内容结束---

jQuery 二级联动的更多相关文章

  1. （实用篇）jQuery二级联动代码

    jquery二级联动城市代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. jQuery二级联动

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

  3. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  4. jQuery 1.3.2 简单实现select二级联动

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

  5. 通同select便签实现简单的二级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  7. Asp.Net下，基于Jquery的Ajax二级联动

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

  8. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  9. jQuery应用实例3：全选、二级联动

    全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...

随机推荐

  1. 移动测试之appium+python 入门代码（二）

    ps: 对于环境安装可能会碰到各种问题,还是要一一解决. 执行: appium-doctor 显示上边界面说明,环境已完成. 同时将手机连接主机(用数据线) ^_^ 执行 adb devices 显示 ...

  2. Oracle基础篇--00引言

    今天开始,复习oracle基础.主要是以前培训的时候的文档作为结构来梳理知识点,主要目的是把Oracle基础打的扎实点.后面要转做后台开发,或者工作中需要用到数据库知识时也不至于临时抱佛脚. 一直以来 ...

  3. RTT设备与驱动之PWM

    这里将PWM当成一个设备:PWM简介 上图是一个简单的 PWM 原理示意图,假定定时器工作模式为向上计数,当计数值小于阈值时,则输出一种电平状态,比如高电平,当计数值大于阈值时则输出相反的电平状态,比 ...

  4. [原创]hibernate更新后jdbc读取不到数据问题

    最近在做工作流插件时使用的是自己基于hibernate连接封装的orm框架,按说跟hibernate共用的一个连接,应该在同一个事务中,但在使用时hibernate saveOrUpdate后(未提交 ...

  5. php和java的区别

    php和java的区别 前几天有个大学的同学给我来电话,他是在培训java的,然后我们就讨论了一下关于php和java的优劣区别(我们的是初学者,所以下面发表的内容可能不会很精准到位,望体谅): 我们 ...

  6. 设置windows 10 wifi

    1.cmd 管理员 2.执行:netsh wlan set hostednetwork mode=allow ssid=test key=123456789 3.执行:netsh wlan start ...

  7. 随机练习：C#实现维吉尼亚加密与解密（解密前提为已知密匙）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. Spring课程 Spring入门篇 3-1 Spring bean装配（上）之bean的配置项及作用域

    课程链接: 本节主要讲了四大块 1 bean的作用域 2 bean作用域代码演练 3 单例 多例应用场景 4 bean的配置项(不重要) 1 bean的作用域 1.1 singleton :单例 1. ...

  9. jQueryMobile（三）

    五].jQueryMobile工具栏 头部.尾部的定位:data-position='inline' 默认data-position='fixed' 固定在头部/尾部data-fullscreen=' ...

  10. 【起航计划 019】2015 起航计划 Android APIDemo的魔鬼步伐 18 App->Device Admin 设备管理器 DeviceAdminReceiver DevicePolicyManager PreferenceActivity的使用

    Device Admin示例介绍了类DeviceAdminReceiver,DevicePolicyManager和ActivityManager. 使用DevicePolicyManager这个类, ...