<!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. xcode 工具 alcatraz---备用

    简介 Alcatraz 是一个帮你管理 Xcode 插件.模版以及颜色配置的工具.它可以直接集成到 Xcode 的图形界面中,让你感觉就像在使用 Xcode 自带的功能一样. 安装和删除 使用如下的命 ...

  2. 求助：对话框下OnInitDialog中使用SetTimer无效

    原文地址:http://www.w3c.com.cn/%E6%B1%82%E5%8A%A9%EF%BC%9A%E5%AF%B9%E8%AF%9D%E6%A1%86%E4%B8%8Boninitdial ...

  3. BZOJ 1087 互不侵犯

    Description 在\(N \times N\)的棋盘里面放\(K\)个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共\(8 ...

  4. linux vi查找命令

    linux vi查找命令   div id="article_content" class="article_content">  使用vi编辑器编辑长文 ...

  5. 由 char（）函数返回的 ASCII字符集中的功能/控制字符

    如果在excel下的单元格写入公式:=“国际经济与贸易”&CHAR(10)&"401班"&CHAR(10)&"A组".则出现: ...

  6. Using Apache Web Server with Jboss AS 7

    In real-world projects, it's common to find Apache web server as a front door to your application se ...

  7. [Locked] Flip Game I & II

    Flip Game I You are playing the following Flip Game with your friend: Given a string that contains o ...

  8. ssh日志记录

    上天查看了服务器安全日志,防火墙屏蔽了处理了一些暴力破解ssh密码的ip(其中一个ip地址为北京一家有名的CDN服务提供商),然后删除了所有的/var/log/secure* 日志文件.今天再来查看日 ...

  9. Wireless Password - HDU 2825（ac自动机+状态压缩）

    题目大意:有个人想破解他邻居的密码,他邻居告诉了一些关于这个密码的信息,并且给他一个单词集合,他用这些信息判断一下最少有多少种密码. 1->, 所有的密码都是有小写字母组成. 2->,密码 ...

  10. 301重定向与CNAME

    CNAME记录是域名指向另一个域名A记录是域名指向IP地址URL跳转是打开这个网址的时候会跳转到另一个指定的网址,URL跳转分为301永久重定向和302临时重定向. 301永久重定向会使搜索引擎抓取新 ...