<!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. Github博客地址

    欢迎访问我的Github博客: J.R.Smith_blog

  2. 转:关于数据库压缩技术的Survey

    原文来自于:http://outofmemory.cn/mysql/database-compression-tech 昨天给团队内的小伙伴做了一个关于数据库压缩技术的Survey,现将其中可以公开的 ...

  3. mysql的乱码问题

    ALTER TABLE `news`.`snapshots` MODIFY title VARCHAR() CHARACTER SET utf8; ALTER TABLE `news`.`snapsh ...

  4. Node.js流

    什么是流? 流是可以从一个源读取或写入数据到连续的目标对象.在Node.js,有四种类型的数据流. Readable - 其是用于读操作. Writable - 用在写操作. Duplex - 其可以 ...

  5. JavaScript+CSS实现经典的树形导航栏

    在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于 ...

  6. 【HDOJ】3451 Beat drop

    BFS.当水滴破裂飞溅后,直到碰到水滴才会停止(观察case1).同时,考虑当水滴飞溅到点(x,y)并且该点同一时间破裂的情况,该水滴算作吸收. /* 3451 */ #include <ios ...

  7. For循环复杂练习

    for是循环当中经常用到的一个结构,练熟了才可以. 练习-需求描述: 在控制台打印以下形式的字符: * * * * * * * * * * * * * * * 思路,首先分析需求的规律 1.首先分析需 ...

  8. COJ 0346 WZJ的旅行（二）更新动态树分治版本

    WZJ的旅行(二) 难度级别:D: 运行时间限制:3000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 时隔多日,WZJ又来到了幻想国旅行.幻想国由N个城市组成,由 ...

  9. （转载）eclipse 快捷键大全，eclipse查找类，文件，添加注释

    (转载)http://hi.baidu.com/fegro/item/8224c8c28b174627ee466598   /* ----------------------------------- ...

  10. 数据结构（堆）：SCOI 2009 生日礼物

    Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩 珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个 ...