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. GZFramwork数据库层《三》普通主从表增删改查

    运行结果: 使用代码生成器(GZCodeGenerate)生成tb_Cusomer和tb_CusomerDetail的Model 生成器源代码下载地址: https://github.com/Gars ...

  2. ConsensusClusterPlus根据基因表达量对样品进行分类

    #http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2881355/ 一致聚类方法,采用重抽样方法来验证聚类合理性. library(ALL)data(ALL)d ...

  3. Android Studio 简单设置

    转自:http://ask.android-studio.org/?/article/14 界面设置 默认的 Android Studio 为灰色界面,可以选择使用炫酷的黑色界面.Settings - ...

  4. boost 编译，windows平台

    下载Boost及生成bjam.exe文件 到Google网站搜索下载boost_1.52版本库,下载完成后,解压到X:下,这个地址自己随便定义.在解压的文件中搜索build.bat文件,把它所在的目录 ...

  5. iOS核心动画学习整理

    最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...

  6. linux tar.gz

    tar命令用于对文件打包压缩或解压,格式为:“tar [选项] [文件]”. 打包并压缩文件:“tar -czvf 压缩包名.tar.gz 文件名” 解压并展开压缩包:“tar -xzvf 压缩包名. ...

  7. XMLHttpRequest upload属性

    一.新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息. 它分成上传和下载两种情况 1)下载的progress事件属于XMLHttpRequest对 ...

  8. php注意事项

    1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅"不应该"使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数 ...

  9. 主成分分析（PCA）核心思想

    参考链接:http://pinkyjie.com/2011/02/24/covariance-pca/ PCA的本质其实就是对角化协方差矩阵. PCA就是将高维的数据通过线性变换投影到低维空间上去,但 ...

  10. Gson手动序列化POJO(工具类)

    gson2.7版本 只是简单的工具类(练习所用): package pojo; import javax.xml.bind.annotation.XmlSeeAlso; import com.goog ...