jQuery 1.3.2 简单实现select二级联动 

复制代码代码如下:


<!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="http://img.jb51.net/jslib/jquery/jquery.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>江苏 
</select> 
<select class="city"> 
<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> 

JQuery实现的二级联动菜单 
先看页面代码 
Html代码 

复制代码代码如下:

<tr> 
<td align="right" width="30%"><span class="red">*</span>短信类型：</td> 
<td align="left"> 
<select name='city' id='first'> 
<option value='-1'>==请选择类型==</option> 
<#list typeList as t> 
<option value='${t.id}'>${t.name}</option> 
</#list> 
</select> 
   
<span id="second"> 
<select id="area" name="msgTypeId"> 
</select> 
</span> 
</td> 
</tr> 

其中id为first的下拉列表为第一个下拉列表，id为second的区域为第二个下拉列表。 
JavaScript代码： 

复制代码代码如下:

<script language="javascript"> 
$(function(){ 
$("#second").hide(); //初始化的时候第二个下拉列表隐藏 
$("#first").change(function(){ //当第一个下拉列表变动内容时第二个下拉列表将会显示 
var parentId=$("#first").val(); 
if(null!= parentId && ""!=parentId){ 
$.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){ 
var options=""; 
if(myJSON.length>0){ 
options+="<option value=''>==请选择类型==</option>"; 
for(var i=0;i<myJSON.length;i++){ 
options+="<option value="+myJSON[i].id+">"+myJSON[i].name+"</option>"; 
} 
$("#area").html(options); 
$("#second").show(); 
} 
else if(myJSON.length<=0){ 
$("#second").hide(); 
} 
}); 
} 
else{ 
$("#second").hide(); 
} 
}); 
}); 
</script> 

jQuery 1.3.2 简单实现select二级联动的更多相关文章

  1. jquery实现select二级联动

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

  2. 纯js做的select二级联动

    分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤   做一个简单的html页面,用于显示select联动,如图所示:   设置js,点击一级选择项时,创建其下对应的二 ...

  3. 简单的layui二级联动

    用layui实现省市二级联动, 需要注意的是使用layui之后, 你看到的下拉选框就不是option了,而是一些div 1.select表单 2.JS, ajax返回的是普通的数组

  4. element-ui select 二级联动

    在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同)  两个输入框代码 <el-form :inline="tru ...

  5. Struts2, jquery, select二级联动

    1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...

  6. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  7. js-day04--Ajax应用--二级联动

    Ajax概述和实用需求 Ajax介绍/阿贾克斯:一.Ajax不是一项具体的技术,而是几门技术的综合应用. Javascript.XHTML和CSS.DOM.XML和XMLHttpRequest.二.A ...

  8. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

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

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

随机推荐

  1. Oracle自动备份bat

    很多时候我们需要自动备份数据库这边推荐bat+Windows计划任务实现 方案1 创建以下bat 然后添加到TaskSchedule(路径最好不要包含中文) @echo off @echo ===== ...

  2. Oracle delete 之后恢复数据

    当我们粗心大意直接delete from不加条件而又没有回滚的时候有一个很简单的方法能够将数据恢复到delete之前的状态 第一种方案已经帮助我解决了实际问题.第二种方案暂未实践 在此记录下以便日后查 ...

  3. git参考

    https://github.com/NewLifeX  (redis.mq.数据海量查询.分布式任务调度)

  4. NIO三大组件简介

    NIO简介 NIO 是面向缓冲区(或者说面向块)编程的, 因为Buffer底层本质上就是内存块.数据被读取到一个缓冲区, 稍后再被它处理, 需要时数据可在缓冲区前后移动, 从而增加了处理过程中的灵活性 ...

  5. POJ 3916：Duplicate Removal 将相近的重复元素删除

    Duplicate Removal Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1745   Accepted: 1213 ...

  6. 从Http上返回Json数据

    我们现在先在浏览器访问一下,看到下面返回的结果: 接下来就是大家最喜欢的写代码环节,为了方便演示,我们这里用winform程序.非常简单,我们新建一个窗体程序,点击后,弹出JSON数据即可.界面如下: ...

  7. 洛谷 P2549 计算器写作文

    题目传送门 解题思路: 背包,f[i]表示计算器位数为i时,可获得的最大分值. 本题与01背包不同的地方在于,物品的摆放顺序对答案是有影响的,例如两个字符串a,b,那么就会出现a+b和b+a两种情况( ...

  8. iphone 面试题(转)

    转]iPhone 面试题解答 2011-07-20 0:51 转载自  492437598 最终编辑  492437598 1.main()  {     int a[5]={1,2,3,4,5};  ...

  9. oracle开机启动

    第一步 修改oratab (root用户执行) /etc/oratab的配置格式如下: $ORACLE_SID:$ORACLE_HOME:Y 例如:orclqdgw:/var/app/oracle/p ...

  10. 十六、JavaScript之%运算符

    一.代码如下 二.运行效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...