`

基于jQuery的级联下拉效果

jQueryCSSJavaScriptServletHTML 
阅读更多

基于jQuery的级联下拉效果

 

先看效果

 JSP代码 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery实例-级联下拉框效果</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<script type="text/javascript" src="js/chainselect.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/chainselect.css">

  </head>
  
  <body>
		<div class="loading">
			<p><img src="images/data-loading.gif" alt="数据装载中" /></p>
			<p>数据装载中......</p>
		</div>
		<div class="car">
			<span class="carname">
				汽车厂商:
				<select>
					<option value="" selected="selected">请选择汽车厂商</option>
					<option value="BMW">宝马</option>
					<option value="Audi">奥迪</option>
					<option value="VW">大众</option>
				</select>
				<img src="images/pfeil.gif" alt="有数据" />
			</span>
			<span class="cartype">
				汽车类型:
				<select></select>
				<img src="images/pfeil.gif" alt="有数据" />
			</span>
			<span class="wheeltype">
				车轮类型：
				<select></select>
			</span>
		</div>
		<div class="carimage">
			<p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>
			<p><img src="" alt="汽车图片" class="carimg"/></p>
		</div>
	</body>
</html>
 JS代码 
$(document).ready(function(){
	document.charset="UTF-8"
	//找到三个下拉框
	var carnameSelect = $(".carname").children("select");
	var cartypeSelect = $(".cartype").children("select");
	var wheeltypeSelect = $(".wheeltype").children("select");
	var carimg = $(".carimg");
	//给三个下拉框注册事件
	carnameSelect.change(function(){
		//1.需要获得当前下拉框的值
		var carnameValue = $(this).val();
		//1.1只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来
		wheeltypeSelect.parent().hide();
		//1.2将汽车图片隐藏起来
		carimg.hide().attr("src","");
		//2.如果值不为空，则将下拉框的值传送给服务器
		if (carnameValue != "") {
			if (!carnameSelect.data(carnameValue)) {
				$.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){
					//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
					var datalist = data.split("#");
					//2.1接收服务器返回的汽车类型
					if (datalist.length != 0) {
						//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
						cartypeSelect.html("");
						$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
						for (var i = 0; i < datalist.length; i++) {
							$("<option value='" + datalist[i] + "'>" + datalist[i] + "</option>").appendTo(cartypeSelect);
						}
						//2.2.1汽车类型的下拉框显示出
						cartypeSelect.parent().show();
						//2.2.2第一个下拉框后面的指示图片显示出来
						carnameSelect.next().show();
					} else {
						//2.3没有任何汽车类型的数据
						cartypeSelect.parent().hide();
						carnameSelect.next().hide();
					}
					carnameSelect.data(carnameValue, data);
				});
			} else {
				var data = carnameSelect.data(carnameValue);
				//2.1接收服务器返回的汽车类型
				//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
				var datalist = data.split("#");
				if (datalist.length != 0) {
					//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
					cartypeSelect.html("");
					$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
					for (var i = 0; i < datalist.length; i++) {
						$("<option value='" + datalist[i] + "'>" + datalist[i] + "</option>").appendTo(cartypeSelect);
					}
					//2.2.1汽车类型的下拉框显示出
					cartypeSelect.parent().show();
					//2.2.2第一个下拉框后面的指示图片显示出来
					carnameSelect.next().show();
				} else {
					//2.3没有任何汽车类型的数据
					cartypeSelect.parent().hide();
					carnameSelect.next().hide();
				}
			}
		} else {
			//3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
			cartypeSelect.parent().hide();
			carnameSelect.next().hide();
		}
	});

	cartypeSelect.change(function(){
		//1.需要获得当前下拉框的值
		var cartypeValue = $(this).val();
		//1.1将汽车图片隐藏起来
		carimg.hide().attr("src","");
		//2.如果值不为空，则将下拉框的值传送给服务器
		if (cartypeValue != "") {
			if (!cartypeSelect.data(cartypeValue)) {
				$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
					//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
					var msglist = data.split("#");
					//2.1接收服务器返回的汽车类型
					if (msglist.length != 0) {
						//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
						wheeltypeSelect.html("");
						$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
						for (var i = 0; i < msglist.length; i++) {
							$("<option value='" + msglist[i] + "'>" + msglist[i] + "</option>").appendTo(wheeltypeSelect);
						}
						//2.2.1车轮类型的下拉框显示出
						wheeltypeSelect.parent().show();
						//2.2.2第二个下拉框后面的指示图片显示出来
						cartypeSelect.next().show();
					} else {
						//2.3没有任何汽车类型的数据		
						wheeltypeSelect.parent().hide();
						cartypeSelect.next().hide();
					}
					cartypeSelect.data(cartypeValue,data);
				});
			} else {
				var data = cartypeSelect.data(cartypeValue);
				//2.1接收服务器返回的汽车类型
				//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
				var msglist = data.split("#");
				if (msglist.length != 0) {
					//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
					wheeltypeSelect.html("");
					$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
					for (var i = 0; i < msglist.length; i++) {
						$("<option value='" + msglist[i] + "'>" + msglist[i] + "</option>").appendTo(wheeltypeSelect);
					}
					//2.2.1车轮类型的下拉框显示出
					wheeltypeSelect.parent().show();
					//2.2.2第二个下拉框后面的指示图片显示出来
					cartypeSelect.next().show();
				} else {
					//2.3没有任何汽车类型的数据		
					wheeltypeSelect.parent().hide();
					cartypeSelect.next().hide();
				}
			}
		} else {
			//3.如果值为空，那么第三个下拉框所在span要隐藏起来，第二个下拉框后面的指示图片也要隐藏
			wheeltypeSelect.parent().hide();
			cartypeSelect.next().hide();
		}
	});

	wheeltypeSelect.change(function(){
		//1.获取车轮类型
		var wheeltypeValue = $(this).val();
		//2.根据汽车厂商名称，汽车型号和车轮类型得到汽车图片的文件名
		var carnameValue = carnameSelect.val();
		var cartypeValue = cartypeSelect.val();
		var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";

		//3.显示出loading的图片
		carimg.hide();
		$(".carloading").show();
		//4.通过Javascript中的Image对象预装载图片
		var cacheimg = new Image();
		$(cacheimg).attr("src","images/" + carimgname).load(function(){
			//隐藏loading图片
			$(".carloading").hide();
			//显示汽车图片
			carimg.attr("src","images/" + carimgname).show();
		});
		//3.修改汽车图片节点的src的值，让汽车图片显示出来
		//carimg.attr("src","images/" + carimgname).show();
		//4.使汽车图片的节点显示出来
	});


	//给数据装载中的节点定义ajax事件，实现动画提示效果
	$(".loading").ajaxStart(function(){
		$(this).css("visibility","visible");
		$(this).animate({
			opacity: 1
		},0);
	}).ajaxStop(function(){
		$(this).animate({
			opacity: 0
		},500);
	});
})
 Servlet代码 
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class ChainSelect extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String cartype = request.getParameter("type");
		String carnameValue = request.getParameter("keyword");
//System.out.println(cartype + "  " + carnameValue);
		if(cartype.equals("top")){
			String str = "tt#d#中";
			out.println(str);
		}else if(cartype.equals("sub")){
			String msg = "rha#rhb#话";
			out.println(msg);
		}
		
	}

}
 CSS代码 
.loading {
	width: 400px;
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	margin: 0 auto;
	visibility: hidden; 
}
.loading p {
	text-align: center;
}
p {
	margin: 0;
}
.car {
	/*width: 500px;*/
	/*margin: 0 auto;*/
	text-align: center;
}
.carimage {
	text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {
	display: none;
}
 

  • 大小: 57.7 KB
分享到：
| 基于jQuery的标签页效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery 级联下拉列表

    在这个场景中，我们将讨论如何使用jQuery实现级联下拉列表。 首先，我们需要理解`$().related`这个函数是jQuery的一个插件方法，它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...

    jQuery 级联下拉列表(修正版)

    总的来说，jQuery级联下拉列表是一个实用的前端功能，通过合理的JavaScript代码和HTML结构，可以实现高效的联动效果，提高用户在网页上的操作体验。修正版的实现则考虑了实际应用中的问题和需求，使得该功能更加健壮...

    JQuery级联下拉

    JQuery级联下拉是指使用JQuery库来实现级联下拉框效果的技术。级联下拉框是一种常见的Web应用程序组件，用于提供用户选择的选项，并根据用户的选择提供相关的下级选项。JQuery级联下拉技术可以帮助开发者快速实现...

    jquerycasecader一个jquery级联下拉组件

    `jQuery Casecader` 是一个用于构建级联下拉菜单的插件，适用于那些需要多级选择或者联动效果的Web应用。在JavaScript开发中，特别是在前端交互设计中，这种组件非常常见，能够帮助用户通过下拉选项来筛选和导航数据...

    最新版Jquery网站导航级联菜单

    网上找了很久这种菜单,浪费了很多时间，实在没办法，只好老老实实去官网上按说明弄了一个，并更新了，jquery1.5.2, 希望给有需要的朋友可以节约一点时间，欢迎交流,qq:170262

    jquery简单实现级联下拉列表

    本文将详细解析如何使用jQuery来实现级联下拉列表，这是一种常见的Web前端功能，常用于数据关联选择场景，如地区选择（省市区）、分类选择等。 ### 核心概念：级联下拉列表 级联下拉列表是指当用户在一个下拉列表...

    jQuery实现的多级级联下拉列表

    **jQuery实现的多级级联下拉列表** 在网页开发中，级联下拉列表是一种常见的交互元素，它允许用户从一系列相关选项中选择，这些选项根据先前的选择动态更新。在本项目中，我们利用jQuery库来实现这种功能，同时结合...

    JQuery写的日期级联下拉菜单

    **jQuery编写的日期级联下拉菜单** 在Web开发中，日期选择是一个常见的需求，而级联下拉菜单则是实现这一功能的一种优雅方式。这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...

    JQuery实战第五讲：级联下拉框效果

    JQuery实战第五讲：级联下拉框效果,如果用在《MVC中更加合适

    select级联下拉列表

    在网页设计中，"select级联下拉列表"是一种常见的交互元素，用于创建省市区选择、类别层级展示等场景。...在实际开发中，我们可以结合jQuery、Ajax以及各种UI库或插件，根据项目需求定制出满足各种场景的级联下拉列表。

    级联下拉demo

    5. **CSS 样式**：为了让级联下拉看起来更美观，CSS可以用来定制样式，包括字体、颜色、边框、过渡效果等。还可以使用`:hover`、`:active`和`:focus`伪类来处理交互状态。 6. **无障碍性**：为了确保级联下拉对所有...

    input 级联下拉列表

    在网页设计和开发中，`input`级联下拉列表是一种常见的交互元素，它允许用户在选择一个选项后，根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据，如国家/地区、省份/...

    级联下拉菜单

    在级联下拉菜单中，jQuery将帮助我们监听用户在第一个下拉菜单中的选择，并基于此触发Ajax请求获取关联数据。 接着，我们来看看ASP.NET的一般处理程序（.ashx）。这是一种HTTP处理模块，它可以像ASPX页面一样处理...

    jquery 实现级联效果!

    本文将深入探讨如何使用jQuery实现级联效果，这种效果常见于下拉菜单、多级选择器和联动筛选等场景。级联效果意味着一个选择会影响另一个相关的选择，从而提供更精细的用户交互体验。 首先，级联效果通常涉及到多个...

    ajax实现级联下拉列表代码

    在网页开发中，级联下拉列表是一种常见的交互设计，它允许用户在选择一个选项后，根据该选项的值动态加载下一个下拉列表的内容。这种功能通常用于展示层级关系的数据，如国家-省份-城市这样的地理信息。在本示例中，...

    Ajax级联下拉列表.rar

    在本示例中，"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计，用户在一个下拉列表中做出选择后，第二个或更多的下拉列表会根据...

    级联下拉列表

    这是一个基础的级联下拉列表实现，对于更复杂的需求，例如异步加载数据、多级级联等，可能需要引入更高级的库，如jQuery UI的`selectmenu`插件或现代前端框架（如React、Vue、Angular）中的组件库。不过，这个简单的...

Magicbox
Global site tag (gtag.js) - Google Analytics