<!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. 原生JS写Ajax的请求函数

    一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  2. WPF学习笔记-使用自定义资源字典（style）文件

    1.添加资源字典文件style.xmal 2.在资源字典中添加自定义style等 <ResourceDictionary xmlns="http://schemas.microsoft ...

  3. 转:PHP如何阻止用户上传成人照片或者裸照

    原文来自于:http://www.hackbase.com/tech/2014-10-12/69367.html 当前,网络淫秽色情信息屡禁不止.屡打不绝,严重危害未成年人身心健康,严重败坏社会风气, ...

  4. Node.js Express框架

    Express 介绍 Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序. 它有助于基于Node Web应用程序的快速开发.下面是一 ...

  5. 以Facebook为案例剖析科技公司应有的工具文化

    http://www.36kr.com/p/146507.html 编者按:本文由 @王淮Harry哥 撰写,摘自他即将出版的新书.王淮是 Facebook 早期员工,中国藉第二位工程师第一位研发经理 ...

  6. Unity C# 游戏间物体间的访问

    脚本语言:C# 1.在Unity工程中新建两个物体:Cube和Sphere 2.分别为Cube和Sphere添加脚本CubeScript和SphereScript: 在SphereScript这两个定 ...

  7. bzoj3709

    首先明显会想到贪心对于那些怪物回血比耗血多的,我们显然应该先打耗血少的那些回血比耗血多的怎么办呢?由于不管怎么打(假设体力负数了还能打),最终体力是一定,我们从最终体力倒推,相当于先吃药掉血,打怪物回 ...

  8. sed的选项与命令简要

    第一部分:sed命令选项 sed选项 说明 -n, --quiet, --silent 静默模式,取消将模式空间中的内容自动打印出来. -e script, --expression=script 以 ...

  9. Elasticsearch教程之基础概念

    基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助. 1.接近实时(NRT)        Elasticsearch是一个接近实时的搜索平台.这意味 ...

  10. HDOJ(HDU) 2503 a/b + c/d(最大公约数问题)

    Problem Description 给你2个分数,求他们的和,并要求和为最简形式. Input 输入首先包含一个正整数T(T<=1000),表示有T组测试数据,然后是T行数据,每行包含四个正 ...