<!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 src="jquery-1.3.2.js" type="text/javascript"></script>

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

       $(document).ready(function(){

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

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

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

                   {

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

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

                   }

               });

           });

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

       });

</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>

</body>

</html>

通同select便签实现简单的二级联动的更多相关文章

  1. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  2. jquery $.post() 向php传值 实现简单的二级联动

    更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...

  3. jq简单城市二级联动实现

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

  4. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  5. php简单实现二级联动

    <script type="text/javascript"> //当第一级选项发生变化的时候跳转 function jump() { location.href='? ...

  6. JS简单实现二级联动菜单

    <form method="post" action=""> 省/市:<select id="province" onch ...

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

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

  8. 如何用jstl的select标签做二级联动下拉列表框？？

    下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...

  9. 纯js做的select二级联动

    分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤   做一个简单的html页面,用于显示select联动,如图所示:   设置js,点击一级选择项时,创建其下对应的二 ...

随机推荐

  1. UIProgressView

    UIProgressView顾名思义用来显示进度的,如音乐,视频的播放进度,和文件的上传下载进度等. 下面以一个简单的实例来介绍UIprogressView的使用. @interface Activi ...

  2. Java中传参的值传递和引用传递问题（转）

    今天遇到了一个java程序,需要用参数来返回值(虽然最后用另一种方法实现了),在网上看到这样一篇文章,很受启发. 本文章来自于http://hi.baidu.com/xzhilie/blog/item ...

  3. centos 6.5关闭NetworkManager

    jrhmpt01:/root# rpm -qa | grep -i network NetworkManager-glib-0.8.1-99.el6.x86_64 system-config-netw ...

  4. For循环练习之99乘法表和转义字符

    之前说了for循环的概念以及常用到的操作,那么我们接下来做几个巩固练习: 1.打印99乘法表: 99乘法表的形式: 1*1 = 1 1*2 = 2 2*2 = 4 1*3 = 3 2*3 = 6 3* ...

  5. OpenCV 2.4.3在VS2010上的应用

    一.下载和安装:    1.OpenCV 2.4.3下载:http://www.opencv.org.cn/index.php/Download#Version_2.4.3    2.下载完成后,解压 ...

  6. C++ Primer 随笔 Chapter 10 关联容器

    1.关联容器的类型:map(键-值对的集合,可理解为关联数组), set(单纯的键的集合), multimap(一个键对应多个值,键唯一), multiset(相同键可以是多个). 2.pair类型提 ...

  7. SRM 395(1-250pt)

    DIV1 250pt 题意:在平面直角坐标系中,只能走到整点,每次有两种移动方法,可以沿平行于坐标轴方向走,也可以沿45度方向走,前者走一步耗时wt,后者走一步耗时st.比如从(x, y)可以走到(x ...

  8. CentOS虚拟机不能联网状况下yum方式从本地安装软件包(转载的)

    大家都知道yum是linux下一个非常好用的软件安装/卸载软件,它方便操作,而且最厉害的是可以解决令人头疼的包依赖关系.但是若是你的linux不能联网,若想使用yum安装软件,可以依照下面的方法. 1 ...

  9. angularJS 指令一

    指令1.指令本质上就是AngularJS拓展具有自定义功能的HTML元素的途径.通过自定义元素来创建指令,如:<my-directive></my-directive>.dir ...

  10. js复选框全选

    <input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'&g ...