JQuery应用五：级联下拉框(JQuery与JSON)

最新推荐文章于 2024-06-29 14:48:29 发布
最新推荐文章于 2024-06-29 14:48:29 发布
阅读量100 收藏
点赞数
分类专栏： JQuery 文章标签： jQuery json Servlet CSS JavaScript ViewUI

页面如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>JQuery_Study_Select</title>
	<link rel="stylesheet" type="text/css" href="css/select.css">
	<script language="javascript" src="js/jquery-1.4.2.js"></script>
	<script language="javascript" src="js/select.js"></script>
  </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>

 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;
}

 js内容如下：

 

$(document).ready(function(){
	//找到三个下接框
	var carnameSelect = $(".carname").children("select");
	var cartypeSelect = $(".cartype").children("select");
	var wheeltypeSelect = $(".wheeltype").children("select");
	var carimg = $(".carimg");
	
	carnameSelect.change(function(){
		//val()方法：获得（设置）第一个匹配元素的当前值。
		var carnameValue = $(this).val();
		wheeltypeSelect.parent().hide();
		//attr(key,value)方法：为所有匹配的元素设置一个属性值。
		carimg.hide().attr("src","");
		if(carnameValue!=""){
			if(carnameSelect.data(carnameValue)) {//从缓存中取数据
				var data = carnameSelect.data(carnameValue);
				//html(val)：设置每一个匹配元素的html内容
				cartypeSelect.html("");
				if(data.length!=0){
					$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
					for(var i=0;i<data.length;i++){
						$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
					}
					carnameSelect.next().show();
					cartypeSelect.parent().show();
				}else{
					carnameSelect.next().hide();
					cartypeSelect.parent().hide();
					wheeltypeSelect.parent().hide();
				}
			}else {
				//Ajax的post请求：
				$.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){
					cartypeSelect.html("");
					if(data.length!=0){
						$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
						for(var i=0;i<data.length;i++){
							$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
						}
						carnameSelect.next().show();
						cartypeSelect.parent().show();
					}else{
						carnameSelect.next().hide();
						cartypeSelect.parent().hide();
						wheeltypeSelect.parent().hide();
					}
					carnameSelect.data(carnameValue,data);
				},"json");
			}
		}else{
			carnameSelect.next().hide();
			cartypeSelect.parent().hide();
			wheeltypeSelect.parent().hide();
		}
	});
	
	cartypeSelect.change(function(){
		carimg.hide().attr("src","");
		var cartypeValue = $(this).val();
		if(cartypeValue !=""){
			if(cartypeSelect.data(cartypeValue)) {
				var data = cartypeSelect.data(cartypeValue);
				wheeltypeSelect.html("");
				if(data.length!=0){
					$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
					for(var i=0;i<data.length;i++){
						$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
					}
					cartypeSelect.next().show();
					wheeltypeSelect.parent().show();
				}else{
					cartypeSelect.next().hide();
					wheeltypeSelect.parent().hide();
				}
			}else {
				$.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){
					wheeltypeSelect.html("");
					if(data.length!=0){
						$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
						for(var i=0;i<data.length;i++){
							$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
						}
						cartypeSelect.next().show();
						wheeltypeSelect.parent().show();
					}else{
						cartypeSelect.next().hide();
						wheeltypeSelect.parent().hide();
					}
					cartypeSelect.data(cartypeValue,data);
				},"json");
			}
		}else{
			cartypeSelect.next().hide();
			wheeltypeSelect.parent().hide();
		}
	});
	
	wheeltypeSelect.change(function(){
		var wheeltypeName = $(this).val();
		var cartypeName = cartypeSelect.val();
		var carnameName = carnameSelect.val();
		var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";
		carimg.hide();//原来的图片隐藏
		
		$(".carloading").show();
		var cachimage = new Image();
		$(cachimage).attr("src","images/"+carimgName);//预装载，预装载时显示load图片
		//carimg.attr("src","images/"+carimgName).show();
		$(cachimage).load(function(){//装载完之后执行的操作，页面会缓存图片
			$(".carloading").hide();
			carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快
		});
	});
	
	$(".loading").ajaxStart(function(){
		$(".loading").css("visibility","visible");
		$(".loading").animate({
			opacity: 1
		},0);
	}).ajaxStop(function(){
		//$(".loading").css("visibility","hidden");
		//$(".loading").fadeOut(500);
		$(".loading").animate({
			opacity: 0
		},500);
	});
	
});

 servlet内空如下：

public class CarJsonServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 7438884867809030432L;

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");

		String type = request.getParameter("type");
		String keyword = request.getParameter("keyword");
		StringBuffer jsonresult = new StringBuffer();
		JSONArray jsonArrayResult = new JSONArray();
		jsonresult.append("[");
		if ("top".equals(type)) {
			if ("BMW".equals(keyword)) {
			//	jsonresult.append("\"316ti\"");
			//	jsonresult.append(",\"6ercupe\"");
				jsonArrayResult.add("316ti");
				jsonArrayResult.add("6ercupe");
			} else if ("Audi".equals(keyword)) {
			//	jsonresult.append("\"tt\"");
				jsonArrayResult.add("tt");
			} else if ("VW".equals(keyword)) {
			//	jsonresult.append("\"Golf\"");
				jsonArrayResult.add("Golf4");
			}
		} else if ("sub".equals(type)) {
			if ("tt".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
				jsonArrayResult.add("rhc");
			} else if ("316ti".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
			} else if ("6ercupe".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
				jsonArrayResult.add("rhc");
			} else if("Golf4".equals(keyword)){
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
			}
		}
		//jsonresult.append("]");
		PrintWriter out = response.getWriter();
		out.write(jsonArrayResult.toString());
		out.flush();
		out.close();
	}

}

 

web.xml中的servlet配置如下：

<servlet>
    <servlet-name>CarJsonServlet</servlet-name>
    <servlet-class>com.mengya.servlet.CarJsonServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>CarJsonServlet</servlet-name>
    <url-pattern>/CarJsonServlet</url-pattern>
  </servlet-mapping>

 

fsgsdfghdfh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery移动端动态四级联动选择面板
08-12
jQuery移动端动态四级联动选择面板
select 无限级联 Jquery 插件
12-05
网页应用中，多个select之间级联刷新是很常见的一个需求，本插件充份运用jquery强大的脚本功能，并运用json实现数据交互，实现了select无限级联的功能，接口调用简洁，刷新功能配置灵活，参数强大， 支持select元素无限级联。极力推荐，并欢迎提出改进意见。
jQuery移动端的收货地址中国省市县级联选择插件
03-19
适用于移动端的选择收货地址的插件，非移动端也可以使用
jquery mobile 实现一个二级联动
ljx896779016的专栏
03-04 323
      前些天做了一个关于微信平台的移动项目，觉得挺好玩的。貌似在网上的能找的的demo，好像很少的样子。下面是一个三级级联动：纯粹是用js写的。 var province = "2:辽宁,1:北京,3:天津,4:河北"; var city = { "2": "201:沈阳,202:大连", "1": "101:西城,102:东城,103:崇文,104:宣武,105...
h5+jquery:使用PickerExtend移动端级联选择器写一个从当前时间到指定时间范围的年月日选择器
lcc0628的博客
01-12 1749
picker-extend 移动端级联选择插件文档地址:picker-extend 移动端级联选择插件 - 掘金 设置选择器id为day-selector 需求:打开默认显示当前日期，不超过能选择超过当前日期 // reverse:false=>向下取范围内所有整数 true=>向上取 //例:selectNum(2,5)=[2,3,4,5];selectNum(2,5,false)=[5,4,3,2] function selectNum(lowNum, upNum, rever.
JQuery异步加载无限下拉框级联功能实现示例
10-26
`Load`方法初始化下拉框并绑定第一个级联数据，`Select`方法处理级联下拉框的选择变化，`Selected`方法根据已选值设置下拉框的初始状态。 `Selected`方法中，我们使用了`split()`函数来解析已选值的字符串，以便...
JQuery + Servlet +Json实现下拉框级联
12-12
总的来说，通过JQuery、Servlet和JSON的结合，我们可以轻松实现下拉框的级联效果，提供用户友好的界面和流畅的交互体验。在实际项目中，可能还需要考虑错误处理、数据缓存、异步加载优化等问题，以提高应用的性能和...
级联下拉框案例
10-21
总的来说，这个级联下拉框案例的核心在于使用jQuery监听并响应用户选择，动态更新下拉框选项，并可能涉及到与服务器的数据交互。虽然案例中没有涉及XML解析，但可以通过其他方式获取和处理数据，例如JSON或简单的...
使用JQuery实现漂亮的三级级联下拉框
04-02
要实现级联下拉框，我们需要监听第一个下拉框的`change`事件，并根据其值来填充第二个下拉框，同样的逻辑也应用于第二个下拉框与第三个下拉框之间。 在HTML结构中，通常每个下拉框会被赋予一个唯一的ID，以便在...
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
10-18
在本文中，我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果，这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容，例如在选择省份后，...
jQuery手机端三级联动下拉菜单特效.
08-11
jQuery手机端三级联动下拉菜单特效.
省市区三级联动 html5+jQuery兼容移动端
09-25
省市区三级联动demo（底部弹出选择），最新省市区三级联动，结合amazeui样式。简洁明了，简单易用，适用于各种移动端！高端大气，值得一用！
jQuery移动端城市/区县联动选择
墨鱼部落格
04-07 309
jQuery移动端城市/区县联动选择 jQuery手机移动端下拉框城市-区县二级联动选择代码。可以根据开头字母查找城市。ps：本地预览请用火狐浏览器，因调用外部json数据Chrome浏览器本地预览有跨域问题！ 演示地址 下载地址 ...
jquery移动端省市县（区）三级联动插件
weixin_34248487的博客
09-08 1195
最近刚做完一个版本的项目，闲暇时间，就索性把项目中需要用到的插件都自己写了一个，毕竟自己动手丰衣足食才是最重要，自己写的，可以应对各种项目需求，今天又把手机端的省市区三级联动选择功能编写了一个插件出来，代码很简单，样式也是应用的跟日期时间选择插件的一样。写省市区三级联动插件的关键是在于你如何编写自己的“省市县（区）”json文件，你要是把...
jquery级联下拉框
weixin_33923762的博客
01-10 68
$(document).ready(function(){ //找到三个下拉框 varcarnameSelect=$(".carname").children("select"); varcartypeSelect=$(".cartype").children("select"); varwheeltypeSelect=$("...
js基于json的级联下拉框
weixin_30532837的博客
07-10 276
级联下拉列表是项目中常用到的。比如省市县，比如企业性质等，做成一个js通用组件， 在静态页出来后可以直接插入，将数据和html静态页做一个解耦。 贴出来抛砖引玉吧。 /** * @author sunfengjia edit * 说明： 使用json数据格式，生成N级下拉框 * params: * data: json对象 * ...
由监官要求下架docker hub镜像导致无法正常拉取镜像
爱辉弟的博客
06-27 163
由监官要求下架docker hub镜像导致无法正常拉取镜像。非常遗憾，接上级通知，即时起我们将中止对dockerhub仓库的镜像。 docker相关工具默认会自动处理失效镜像的回退，如果对官方源有访问困 难问题，建议尝试使用其他仍在服务的镜像源。
创建一个vue3+vite+ts项目
最新发布
m0_56885551的博客
06-29 231
新建一个vue3+vite+tsx项目
php级联下拉框
05-27
以下是一个基于 PHP 技术实现的级联下拉框的示例代码，其中包含三个下拉框。 HTML 代码： ```html ()"> 请选择分类1 分类1-1 分类1-2 分类1-3 ()"> 请选择分类2 请选择分类3 ``` JavaScript 代码： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值