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. restful风格下的ajax跨域问题的解决

    Ajax跨域请求时,如果设置Header的ContentType为application/json,会分两次发送请求一次先发送Method为OPTIONS的请求到服务器,这个请求会询问服务器支持哪些请 ...

  2. 【Linux】tcp缓冲区大小的默认值、最大值

    Author:阿冬哥 Created:2013-4-17 Blog:http://blog.csdn.net/c359719435/ Copyright 2013 阿冬哥 http://blog.cs ...

  3. 性能测试工具Jmeter11-Jmeter图形监控扩展

    插件下载地址:http://jmeter-plugins.org/downloads/all/ 1.首先将JmeterPluging.jar包复制到Jmeter的Lib目录下面的ext目录下面,然后重 ...

  4. Spring Cloud学习笔记之微服务架构

    目录 什么是微服务 架构优点 架构的挑战 设计原则 什么是微服务     微服务构架方法是以开发一种小型服务的方式,来开发一个独立的应用系统的.     其中每个小型服务都运行在自己的进程中,并经常采 ...

  5. linux创建用户与删除用户及问题解决（ubuntu）

    创建的用户不正确,一直在删除创建,发现了挺多问题也学到了一些东西如下是我的总结. (root用户设置: 由于ubtun系统默认是没有激活root用户的,需要我们手工进行操作,在命令行界面下,或者在终端 ...

  6. jQuery综述

    jQuery是一个轻量级JavaScript库 它可以进行如下操作: 选取HTML元素 对HTML元素进行操作 对CSS进行操作 编写HTML事件函数 JavaScript特效 HTML DOM AJ ...

  7. 设计模式之装饰器模式io的小入门(十一)

    装饰器模式详解地址 原文总结 定义: 在不必改变原类文件和使用继承的情况下, 动态的扩展一个对象的功能. 通过创建一个包装对象, 也就是装饰来包裹真实的对象 部分详解提示 看了一些文档, 装饰器模式非 ...

  8. JQuery Dialog对话框 不能通过Esc关闭

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可 ...

  9. 用IDEA创建一个SpringBoot项目

    next后等待项目构建完成 运行方法一: 方法二:

  10. Inconsistent accessibility

    Inconsistent accessibility: return type 'ConsoleApplication17.IBacklight' is less accessible than me ...