<!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. 解决m2eclipse之Unable to update index for central |

    maven 不能更新,真烦人,转载他人的 maven是个好东西,eclipse上的maven插件m2eclipse也非常方便,但是最近这个东西经常无法连接到maven index的更新网站,然后ecl ...

  2. 发一下关于公司的HOUSE OF HELLO 关于假货网站的声明吧

    HOUSE OF HELLO,致力于为新时代潮流女性提供优质时尚的手袋,公司核心价值观是:坚韧开拓市场,真诚铸就成长,行动改变命运,激情成就梦想.公司从上到下的员工,都富于激情的努力工作,以积极,主动 ...

  3. WPF小程序：贪吃蛇

    原文地址:http://hankjin.blog.163.com/blog/static/337319372009535108234/ 一共两个文件:EasterEgg.xaml + EasterEg ...

  4. [BZOJ 2326] [HNOI2011] 数学作业 【矩阵乘法】

    题目链接:BZOJ - 2326 题目分析 数据范围达到了 10^18 ,显然需要矩阵乘法了! 可以发现,向数字尾部添加一个数字 x 的过程就是 Num = Num * 10^k + x .其中 k ...

  5. KV总结

    今天没事又重新写了一遍.很多注释是自己犯糊涂后来又终于跨过去的备忘. // ImgEff.js function ImgEff(div,time){ //构造函数,需要传入参数div的id和时间 // ...

  6. SOC

    http://marsvaadin.iteye.com/blog/1311438 http://blog.csdn.net/cxxsoft/article/details/12610641

  7. Jenkins安装入门

    这是一次兴奋之旅哈..说不定用得着呢~~~:) 嘿嘿.. 安装很简单,JDK,MAVEN(如果),YUM或RPM包安装JENKINS(因为好像YUM安装好慢,不如RPM下载安装) 参考URL: htt ...

  8. 延长FLASH和EEPROM芯片写入次数的小方法

    开发电子产品时,常常需要断电后保存某些数据,这就需要使用 FLASH或EEPROM芯片,这两种芯片,可擦除的次数是有限制的,通常FLASH为10万次,EEPROM要多一点,为100万甚至1000万次. ...

  9. Unity NGUI 创建简单的按钮

    Unity版本:4.5.1 NGUI版本:3.6.5 注意NGUI版本,网上的大部分教程都是2.x版本的,在步骤上面略有不同,此文适合初学者. 示例: 通过NGUI创建一个背景和按钮. 1.首先创建一 ...

  10. Linux下高并发网络编程

      Linux下高并发网络编程 1.修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是服务端程序,在进行高并发TCP连接处理时, 最高的并发数量都要受到系统对用户单一进程同时可打 ...