(实用篇)jQuery二级联动代码
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二级联动代码的更多相关文章
- jQuery 二级联动
jQuery 二级联动 ----请选择省份---- 北京 上海 江苏 ----请选择城市---- 东城 西城 崇文 宣武 朝阳 黄浦 卢湾 徐汇 长宁 静安 南京 镇江 苏州 南通 扬州 & ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- jQuery二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ajax二级联动代码实例
//二级联动 $(function () { var _in_progress = false; function check_in_progress() { if (_in_progress == ...
- jquery实现select二级联动
jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- jQuery 1.3.2 简单实现select二级联动
jQuery 1.3.2 简单实现select二级联动 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- 通同select便签实现简单的二级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Asp.Net下,基于Jquery的Ajax二级联动
最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...
- jquery $.post() 向php传值 实现简单的二级联动
更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...
随机推荐
- 151102SQL语句
$condition = array($pk=>array('in',explode(',',$id)));//??? $this->model->where($condition) ...
- 选出N个不重复的随机数
<script type="text/javascript"> var str="0123456789"; var arr=[]; var n; w ...
- Cheatsheet: 2015 08.01 ~ 08.31
Java Beginner's Guide to MVC with Spring Framework Exploring the Spring Web MVC for Web Application ...
- 反编译CHM文件
1.进入dos 2.输入 HH.EXE -decompile <输出路径> <目标chm文件> 例如:hh.exe -decompile d:\heihei D:\123.ch ...
- 20161026__Oracle10g_DataGuard
1. orcl.__db_cache_size=180355072 orcl.__java_pool_size=4194304 orcl.__large_pool_size=4194304 orcl. ...
- js高级程序设计(六)面向对象
ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正 ...
- CENTOS修改主机名
1.临时修改主机名 显示主机名: zhouhh@zzhh64:~$ hostname zhh64 修改主机名: zhouhh@zzhh64:~$ sudo hostname zzofs zhouhh@ ...
- (34)odoo反代理中客户IP处理
* 前言 一般我们部署时会用nginx做为前端处理,有时负载时还会用到其它web服务反代理 这里只给出nginx处理方法,其它参考处理 * nginx上的客户IP传递 ...
- C# 自动运行代码 (创建windows 服务的形式 )
本文转载自:http://blog.csdn.net/csethcrm/article/details/17917721 1. 新建项目 1.1 右键解决方案 – 添加 – 新建项目 1.2 ...
- Hibernate createCriteria查询详解
本文转载自 : http://penghao122.javaeye.com/blog/80794 1.创建一个Criteria实例 net.sf.hibernate.Criteria这个接口代表对一个 ...