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. centos7 程序快捷方式

    /usr/share/Applications 在此文件夹中,全是".desktop"的文件,利用终端打开一个看看就知道了!

  2. 用ftp命令实现主机文件批量更新

    我们的主机环境是windows 2003,平时程序员访问都喜欢用远程桌面.简单快捷直观.不过我比较喜欢在本地用vim和命令行,这样编辑修改不需要受网络影响. 这种情况下,我本地调试的程序,要经常更新到 ...

  3. 实验吧-web-Guess Next Session(session简介)

    看代码: <?php session_start(); if (isset ($_GET['password'])) { if ($_GET['password'] == $_SESSION[' ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-search

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. JuJu团队11月30号工作汇报

    JuJu团队11月30号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达  提供类似generator的数据产生接口  改进代码  对julia不够熟悉 婷婷  和队友一起 ...

  6. java中关键字super

    super关键字的作用 java中的super关键字是一个引用变量,用于引用父类对象.关键字“super”以继承的概念出现在类中. 主要用于以下情况:1.调用父类的方法   2.调用父类的变量  3. ...

  7. Jenkins实现自动打包，MAVEN打包，Shell脚本启动

    1.点击New任务 2.创建任务,输入项目名 3.输入描述等 4.选择Git或SVN 5.自动,定时打包 6.在Build下配置

  8. Struts+Hibernate+Spring面试题合集及答案(转)

    Struts+Hibernate+Spring面试题合集及答案 Struts+Hibernate+Spring 面试题合集 1 1. Hibernate部分 2 1.1. Hibernate工作原理 ...

  9. Lombok认知

    Lombok的简介 Lombok是一款Java开发插件,公司项目到处使用,整体效果很棒,代码更干净.Java开发人员可以节省出重复构建,诸如hashCode和equals这样的方法以及各种业务对象模型 ...

  10. PGSQL基本操作语句

    ; --更新数据 ,,) ; --插入数据 ORDER BY app_name,flag asc/desc ; --查询数据并且排序 offset ; --查询起点0开始查询,返回5条数据 ORDER ...