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. css3 移动端页面全屏旋转，横屏显示。

    css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...

  2. DRF-->1 序列化组件的使用和接口设计---get

    定义序列化器(本质就是一个类),一般包括模型类的字段,有自己的字段类型规则.实现了序列化器后,就可以创建序列化对象以及查询集进行序列化操作,通过序列化对象.data来获取数据(不用自己构造字典,再返回 ...

  3. 数据库mysql基础语言--各模式的含义

    1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...

  4. python单元测试框架-unittest（二）之断言

    断言内容是自动化脚本的重要内容,正确设置断言以后才能帮助我们判断测试用例执行结果. 断言方法 assertEqual(a, b) 判断a==b assertNotEqual(a, b) 判断a!=b ...

  5. 硬盘和显卡的访问与控制（三）——《x86汇编语言：从实模式到保护模式》读书笔记03

    上一篇博文我们用了很大的篇幅说了加载器,这一篇我们该说说用户程序了. 先看作者的源码吧. ;代码清单8-2 ;文件名:c08.asm ;文件说明:用户程序 ;创建日期:2011-5-5 18:17 ; ...

  6. SQL命令行操作

    命令行操作(mysql.exe)    0.登录  :       mysql -u root -p    1.显示数据库列表:    show databases;     2.选择数据库:     ...

  7. c#-day02学习笔记

    类型转化 为什么要类型转化:因为C#语言是强类型的语言,所以区分了很多的类型,类型和类型之间是不能直接赋值的,如果要赋值 就需要转换类型 类型转换分为两大类: 第一类:隐式转换 隐式转换是系统默认的转 ...

  8. 第一个flask程序

    flask简介: flask是一款非常流行的Python Web框架,出生于2010年,作者是Armin  Ronacher,本来这个项目只是作者在愚人节的一个玩笑,后来由于非常受欢迎,进而成为一个正 ...

  9. c#获取目录2

    // 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径. System.Diagnostics.Process.G ...

  10. Hibernate课程 初探多对多映射2-4 测试

    package com.ddwei.test; import org.hibernate.Session; import org.hibernate.Transaction; import com.d ...