jquery二级联动城市代码

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

<script type="text/javascript"> 

var currentShowCity=0;

$(document).ready(function(){

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

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

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

           {

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

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

               currentShowCity=i;

           }

       });

   });

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

});

function getSelectValue(){

    alert("1级="+$("#province").val());

    $(".city").each(function(i,o){

         if(i == currentShowCity){

            alert("2级="+$(".city").eq(i).val());

         }

   });

}

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

<INPUT TYPE="button" VALUE="点我" ONCLICK="getSelectValue();">

</script>

</body>

</html>

以下是实例界面

（实用篇）jQuery二级联动代码的更多相关文章

  1. jQuery 二级联动

    jQuery 二级联动 ----请选择省份---- 北京 上海 江苏 ----请选择城市---- 东城 西城 崇文 宣武 朝阳  黄浦 卢湾 徐汇 长宁 静安 南京  镇江 苏州 南通 扬州 & ...

  2. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  3. jQuery二级联动

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

  4. ajax二级联动代码实例

    //二级联动 $(function () { var _in_progress = false; function check_in_progress() { if (_in_progress == ...

  5. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

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

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

  7. 通同select便签实现简单的二级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

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

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

随机推荐

  1. js的一些复习

    JavaScript Js是一种直译式的脚本语言,是一种弱类型,基于对象的语言.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言 ...

  2. jQuery选择器的优化选择

    jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]");  ...

  3. MultiProvider

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. 《BI那点儿事》数据流转换——字符映射表

    特征映射转换如图展示数据流中列的特征,它的编辑界面很简单,只有一个标签界面,点击要进行映射的列,可以选择需要添加新列或需要更新的列.可以在Output Alias列中给原来的列一个别名,选择要进行的操 ...

  5. python 线程学习

    彩照 一.学习[1] # -*- coding: utf-8 -*- import time import thread def timer(no, interval): cnt = 0 while ...

  6. vim 简单配置

    在启动vim时,当前用户根目录下的.vimrc 文件会被自动读取,该文件可以包含一些设置甚至脚本,所以,一般情况下把.vimrc 文件创建在当前用户的根目录下比较方便,即:$vi ~/.vimrc,然 ...

  7. 转：已知2个整形数据a,b.不使用if,?:以及其他任何条件判断的语法，找出a跟b中数据的大者。

    答案: int max(int a,int b){return (a+b+abs(a-b))/2;} 类似的 请定义一个宏,比较两个数a.b的大小,不能使用大于.小于.if语句 答案: #define ...

  8. Github上传代码菜鸟超详细教程【转】

    最近需要将课设代码上传到Github上,之前只是用来fork别人的代码. 这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三部:填写名称,简介(可选), ...

  9. JavaWeb基础: 获取资源文件

    Web工程在编译构建完毕以后,需要部署到Tomcat上运行,资源的硬盘路径也会随着改变.要想对资源文件进行读写操作需要获取其硬盘地址,在Web工程中通常通过ServletContext/ClassLo ...

  10. 两种PHP生成二维码的方法

    PHP生成二维码,个人认为最常用的有两种,1.使用google的api生成,2.使用PHP QR Code生成,两种方法生成的二维码都是很清淅的,效果不错.下面来分别说明这两种方法如何实现. 一.PH ...