jQuery实现级联下拉框(5)

编辑：宝哥软件园来源：互联网时间：2021-09-06

新天龙八部

角色扮演 | 1.85G

评分

立即下载

今天，我们将完成jQuery的级联下拉框效果。效果函数如下：

默认情况下，该页面仅提供汽车制造商。当选择一个特定品牌的汽车时，会动态显示汽车类型下拉框，然后显示该汽车类型对应的轮胎类型下拉框。将选择轮胎类型，汽车图片将显示在页面中间。思维分析如图：

为了创建我们的html页面，过程列表如下：

代码清单1.1: chainSelect.jsp

body div class=' loading ' pimg src=' http :/image/data-loading . gif ' alt=' data loading '/p pdata loading./p/Div Div class=' car ' span class=' car name '汽车制造商：选择选项值selected=' selected '请选择汽车制造商/选项值='BMW' BMW/Option选项值='Audi '奥迪/选项值='VW '大众/选项/选择img src=' http:/image/pfeil . gif ' alt=' with data '/Span class=' Cartype '汽车类型： select option selected=' selected '默认选项/option option test1/option/select img alt=' with data ' src=' http :/image/Pfeil . gif/span span class=' wheel type ' wheel type : select option selected=' selected ' default option/option test1/option/select/span/Div class=' CARI image ' pimg src=' http :/image/img-loading . gif ' alt=' picture loading ' class=' CARI mg '/P pimg src=' http 3360 ' alt=' car picture ' class=' CARI mg '/P/div/body body包含三个div，第一个div用于显示“数据正在加载中……”的图片和文本。第二个div显示级联下拉效果。第三个分区显示了车辆的图片。

Css代码如下：

代码清单1.2:链选。正在加载{ width: 400pxmargin: 0 auto/* visibility:隐藏；*/}.正在加载p { text-align : center；} p { margin : 0；}.汽车{ text-align : center；}.CARI image { text-align : center；}.卡特彼勒。wheeltype，汽车装载。卡里姆。汽车img { display:无；}代码清单1 . 3:链选. js

$(文档)。ready(function(){//找到三个下拉框var carnameselect=$(')。卡纳梅’)。子代(' select ')；var cartypeSelect=$('。cart type’)。子代(' select ')；var wheeltypeSelect=$('。wheel type’)。子代(' select ')；卡纳梅塞特。change (function () {console。日志(‘汽车制造商触发onChange事件’)；});Cartype select。change (function () {console。日志(“汽车类型触发onChange事件”)；});轮式选择。change (function () {console。日志('滚轮触发onChange事件')；});});首先，使用jQuery的类选择器选择三个下拉框，当它们的值发生变化时，触发相应的jQuery函数。jQuery函数的处理是关键内容。让我们从jQuery中的ajax交互开始。在上一篇文章中，我们使用了get()的请求方法，但是今天我们使用了post()的请求方法。

jQuery.post(url、[数据]、[回调]、[类型])

概述：

通过远程HTTP POST请求加载信息。这是一个简单的POST请求函数，用来替换复杂的ajax()。请求成功时调用回调函数。如果发生错误时需要执行函数，请使用$.ajax。

参数含义：

Url:发送请求地址。数据：要发送的键/值参数。Callback:在函数成功发送后回调函数。Type:返回内容格式，XML，html，脚本，JSON，文本，_ default。

案例如下：

代码清单1.4:演示. js

$(文档)。ready(function(){//启动ajax请求$。' post('./链选'，{name:' John '，time:' 2pm'}，函数(数据){ console . log(' name 3360 ' data . name)。console . log(' type : ' data . type)；}，' JSON ')；});后台Serlvet处理如下(当然可以使用spring mvc或者其他后台语言)。

1.5:demo.java代码列表

导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse公共类链选扩展了httpersvlet { private static最终长串行版本id=1L；受保护的void doGet(HttpServletRequest请求，HttpServletResponse响应)引发ServletException，IOException { system。出去。println(' name='请求。getparameter(' name ')；系统。出去。println(' time='请求。GetParameter(' time ')；回应。setcharacter encoding(' UTF-8 ')；回应。SetContentType(' application/JSON；charset=utf-8 ')；字符串jsonStr=' { ' name ' : ' fly '， ' type ' : '虫子'}';PrintWriter out=null尝试{ out=响应。getwriter()；出去。write(jsonStr)；} catch(IOexception e){ e . print stack trace()；}终于{ if (out！=null){ out。close()；} } }受保护的void doPost(HttpServletRequest请求，HttpServletResponse响应)引发ServletException，IOException { doGet(请求，响应);}}别忘了纯塞尔维特部属要在你的web.xml做配置。我的塞尔维特的完整路进地址是：http://localhost :8080/JqueryStudy/链选，两句System.out.println()输出创建交互式、快速动态网页应用的网页开发技术传递过来的参数名字和时间。回应。setcharacter encoding(“UTF-8”)的作用是告诉浏览器字符串为utf-8的编码，防止中文乱码问题回应。SetContentType(" application/JSON；字符集=utf-8”)将返回的字符串以json格式形式返回出去。对象是输出流，如果返回的是数组，格式应该如下：["test1 "、" test2 "、" test3"]，如果是json类，则格式如下：{"名称":"飞行","类型":虫子"}。

上诉案例返回的是json对象，后台控制台输出：

约翰时间=下午2点

前端浏览器的控制台输出：

名称：飞行类型：虫子

小型应用程序返回数组的案例如下：

代码清单1.6:demo.java

$(文档)。就绪（函数(){ //发起创建交互式、快速动态网页应用的网页开发技术请求$.' post('./链选，{姓名： '约翰'，时间： '下午2点' }，函数（数据){ for(var I=0；一。数据。长度；I){控制台。日志((I)^ 1 ' : '数据[I])；} }，' JSON ')；});后台之需要给jsonStr赋值为数组格式而已，而前端jQuery代码由于接收到的字符串数组，所以这里需要用遍历数组的形式来遍历。

本案例的小型应用程序代码清单：

代码清单1.7:ChainSelect.java

导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse公共类链选扩展了httpersvlet { private static最终长串行版本id=1L；受保护的void doGet(HttpServletRequest请求，HttpServletResponse响应)引发ServletException，IOException { response。setcharacter编码(' UTF-8 ')；回应。SetContentType(' application/JSON；charset=utf-8 ')；字符串jsonStr=this。GetStr(request.getParameter('关键字)，请求。GetParameter('类型'));PrintWriter out=null尝试{ out=响应。getwriter()；出去。write(jsonStr)；} catch(IOexception e){ e . print stack trace()；}终于{ if (out！=null){ out。close()；} } }私有字符串getStr(字符串关键字，字符串类型){ String jsonStr=if('top ' .等于(类型)){如果('宝马').等于(关键字)){ jsonStr='['316ti '， ' 6ercupe ']'；} else if('奥迪。等于(关键字)){ jsonStr='[ ' TT ']'；} else if('大众' .等于(关键字)){ jsonStr='[ ' golf 4 ']'；} } else if('sub ' .equals(type)) { if('tt ' .等于(关键字)){ jsonStr='['rha '，'rhb '， ' rhc ']'；} else if('316ti ' .等于(关键字)){ jsonStr='['rha '， ' RhB ']'；} else if('6ercupe ' .等于(关键字)){ jsonStr='['rha '，'rhb '， ' rhc ']'；} else if('Golf4 ' .等于(关键字)){ jsonStr='['rha '， ' RhB ']'；} }返回jsonStr}受保护的void doPost(HttpServletRequest请求，HttpServletResponse响应)引发ServletException，IOException { doGet(请求，响应);}}代码清单1.7与清单1.6的区别是，后者多了getStr()的方法，该方法用于判断前端传递过来的是一级（顶部)下拉框的值，还是二级（分)下拉框的值，并根据传递的关键字返回需要的字符串。与本后台交互的是程序清单1.8所示的代码。

程序清单1.8:链选。射流研究…

/** * 级联下拉框效果*/$(文档)。就绪（函数(){ //找到三个下拉框var carnameSelect=$(' .卡纳梅')。子代(“选择”)；var cartypeSelect=$(' .推车类型').子代(“选择”)；var wheeltypeSelect=$(' .轮式’).子代(“选择”)；caname select。change(function(){ var caname=caname select。val()；如果(卡纳梅！='') { //汽车厂商不为空发起创建交互式、快速动态网页应用的网页开发技术请求$.' post('./链结选择，{keyword:卡纳梅，键入： 'top'}，函数（数据){ if(数据！=null数据，长度！=0) { //清除上一次变化的内容cartypeselect。html(" ")；$("选项值="请选择汽车类型/option ').appendo(cartypeselect)；for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').appendo(cartypeselect)；} $('.推车类型').show()；cannameselect。下一个(' img ').show()；} }，' JSON ')；} else { //3 .如果值为空，那么第二个下拉框所在跨度要隐藏起来，第一个下拉框后面的指示图片也要隐藏$('.推车类型').hide()；$('.轮式’).hide()；$('.CARI图像').hide()；$(这个)。下一个(' img ').hide()；} });cartypeselect。change(function(){ var cartype=cartypeselect。val()；if(cartype！='') { //汽车类型不为空发起创建交互式、快速动态网页应用的网页开发技术请求$.'' post('./链结选择，{ keyword: cartype，type : 'sub'}，函数（数据){ if(数据！=null数据，长度！=0) { //清除上一次变化的内容wheeltypeselect。html(“”)；$("选项值="请选择车轮类型/option ').附录（轮式选择);for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').附录（轮式选择);} $('.轮式’).show()；cartypeSelect.next('img ').show()；} }，' JSON ')；} else { //汽车类型为空$('.轮式’).hide()；$('.CARI图像').hide()；$(这个)。下一个(' img ').hide()；} });wheeltypeselect。change(function(){//选中的车轮类型可变车轮类型=车轮类型选择。val()；if(wheeltype！='') { //选中的车辆厂商定义变量卡纳梅=卡纳梅选择。val()；//选中的车辆类型var cartype=CartypeSelect。val()；//图片的名称var carimgName=卡纳梅_ ' cartype ' _ ' wheeltype ' .jpg '；控制台。日志(' carimg名称： ' carimg名称)；$('.CARI图像').show()；$('.CARI mg ' .attr('src '，'./image/' carimgName).负载(函数(){ //隐藏装货图片$('.汽车装载)。隐藏('慢');});$('.carimage p img ' .显示('慢');} else {//alert('内容为空');//$('img ').hide()；$('.CARI图像').hide()；} });//给数据装载中的节点定义创建交互式、快速动态网页应用的网页开发技术事件，实现动画提示效果$('.正在加载')。ajaxStart(function(){ $(this)).' CSS('可见','可见');$(这个)。animate({ opa city 3360 1 }，0)；}).ajaxStop(函数(){ $(此)).动画({ opacity: 0 }，500)；});});jQuery代码的思路是，用班级选择器选择出三个下拉框，赋值给变量carnameSelect，cartypeSelect，wheeltypeSelect，默认卡纳梅瑟精选下拉框是显示的，其他下拉框是隐藏。然后给他们三者注册更改()事件，当用户选择下拉框的值的时候执行事件函数体里面的内容。这里我以第一级下拉框为例来讲解处理的过程。如果用户选择了第一级下拉框"汽车厂商"的"宝马",则执行如下代码：

caname select . change(function(){ var caname=caname select . val()；if(卡纳梅！=' '){//汽车制造商没有发起$的ajax请求。' post('.chainselect '，{关键字：卡纳梅，类型：' top'}，函数(数据){if(数据！=null数据，长度！=0) {//清除上次更改cartypeSelect.html(‘’)的内容；$(“选项值=”“请选择车型/选项”)。追加到(购物车类型选择)；for(var I=0；一.数据.长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ')。appendo(CartTypeSelect)；} $('.cart type’)。show()；cannameselect . next(' img ')。show()；} }，' JSON ')；} else {//3。如果值为空，则应隐藏第二个下拉框所在的跨度，第一个下拉框后面的指示图片也应隐藏$('。cart type’)。hide()；$('.wheel type’)。hide()；$('.CARI image’)。hide()；$(这个)。下一个(' img ')。hide()；} });首先，取出一级下拉框的内容。如果值为空，则应隐藏第二个下拉框所在的跨度，第一个下拉框后面的指示图片也应隐藏。如果有任何内容，请使用这一行代码$。帖子("./链选"、{关键字：车名，键入： "top"}、函数(数据){}、" JSON ")向上诉的Serlvet发起post请求。post的第一个参数是Serlvet的后台地址。第二个参数在括号中绘制json数据，第三个参数是回调函数，第四个参数“json”表示发送的json数据。在回调函数中，参数数据接收Serlvet返回的值。由于Serlvet返回可以解析为字符串数组的数据，因此for循环用于遍历获得的数据，并生成一个选项新节点appenTo()并将其插入到select中。

在程序清单1.8中，也有$(”。装载”)。ajaxstart (function () {})。ajaxstop (function () {})，这是为了美化加载汽车图片的代码。在这里，我们使用jQuery动画特效的动画()让程序的淡入淡出更加和谐。

到目前为止，级联效果几乎已经实现，但是如果用户在高并发环境下每次切换选项都向服务器发送请求，对服务器的压力可能会太大。所以这里我们使用jQuery缓存来保存那些缓存的请求。可以使用jQuery的data()方法。

定义和用法

从所选元素返回附加数据。

$(选择器)。数据(名称)

该名称是可选的。指定要检索的数据的名称。如果未指定名称，该方法将从元素中以对象形式返回所有存储的数据。

将数据附加到元素

$(选择器)。数据(名称、值)

需要姓名。指定要设置的数据的名称。值是必需的。指定要设置的数据值。数据()的用例如程序清单1.9所示：

html head script type=' text/JavaScript ' src=' http :/jquery/jquery . js '/script script type=' text/JavaScript ' $(文档)。ready(function(){ $('#btn1 '))。单击(function(){ $('div ')。数据(‘问候’‘Hello World’)；});$('#btn2 ')。单击(function(){ alert($('div '))。数据('问候语')；});});/script/head dybutton id=' BTN 1 '将数据添加到div元素/buttonbr /button id='btn2 '获取添加到div元素/buttondiv/div/body/html缓存后添加完整的jQuery代码，如下图程序清单所示。程序清单2.0

/** * 级联下拉框效果*/$(文档)。就绪（函数(){ //找到三个下拉框var carnameSelect=$(' .卡纳梅')。子代(“选择”)；var cartypeSelect=$(' .推车类型').子代(“选择”)；var wheeltypeSelect=$(' .轮式’).子代(“选择”)；caname select。change(function(){ var caname=caname select。val()；如果(卡纳梅！='') { if(！carnameSelect.data(卡纳梅)){ //汽车厂商不为空发起创建交互式、快速动态网页应用的网页开发技术请求$.' post('./链结选择，{keyword:卡纳梅，键入： 'top'}，函数（数据){ if(数据！=null数据，长度！=0) { //清除上一次变化的内容cartypeselect。html(" ")；$("选项值="请选择汽车类型/option ').appendo(cartypeselect)；for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').appendo(cartypeselect)；} $('.推车类型').show()；cannameselect。下一个(' img ').show()；} //将数据放入缓存carnameSelect.data(carname，data)；}，' JSON ')；} else { //从缓存中取出数据var数据=卡纳梅瑟Select.data(卡纳梅);如果(数据！=null数据，长度！=0) { //清除上一次变化的内容cartypeselect。html(" ")；$("选项值="请选择汽车类型/option ').appendo(cartypeselect)；for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').appendo(cartypeselect)；} $('.推车类型').show()；cannameselect。下一个(' img ').show()；} } } else { //3 .如果值为空，那么第二个下拉框所在跨度要隐藏起来，第一个下拉框后面的指示图片也要隐藏$('.推车类型').hide()；$('.轮式’).hide()；$('.CARI图像').hide()；$(这个)。下一个(' img ').hide()；} });cartypeselect。change(function(){ var cartype=cartypeselect。val()；if(cartype！='') { if(！cartypeselect。数据(cartype)){//汽车类型不为空发起创建交互式、快速动态网页应用的网页开发技术请求$.'' post('./链结选择，{ keyword: cartype，type : 'sub'}，函数（数据){ if(数据！=null数据，长度！=0) { //清除上一次变化的内容wheeltypeselect。html(“”)；$("选项值="请选择车轮类型/option ').附录（轮式选择);for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').附录（轮式选择);} $('.轮式’).show()；cartypeSelect.next('img ').show()；} cartypeSelect.data(cartype，data)；}，' JSON ')；} else { var data=CartypeSelect。数据(car type)；如果(数据！=null数据，长度！=0) { //清除上一次变化的内容wheeltypeselect。html(“”)；$("选项值="请选择车轮类型/option ').附录（轮式选择);for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').附录（轮式选择);} $('.轮式’).show()；cartypeSelect.next('img ').show()；} } } else { //汽车类型为空$('.轮式’).hide()；$('.CARI图像').hide()；$(这个)。下一个(' img ').hide()；} });wheeltypeselect。change(function(){//选中的车轮类型可变车轮类型=车轮类型选择。val()；if(wheeltype！='') { //选中的车辆厂商定义变量卡纳梅=卡纳梅选择。val()；//选中的车辆类型var cartype=CartypeSelect。val()；//图片的名称var carimgName=卡纳梅_ ' cartype ' _ ' wheeltype ' .jpg '；$('.CARI图像').show()；//通过爪哇岛描述语言中的图像对象预装载图片var cache img=new Image()；$(缓存g).attr('src '，'./image/' carimgName).负载(函数(){ //隐藏装货图片$('.汽车装载)。隐藏('慢');$('.CARI mg ' .attr('src '，'./image/' carimgName)；});$('.carimage p img ' .显示('慢');} else { $(' .CARI图像').hide()；} });//给数据装载中的节点定义创建交互式、快速动态网页应用的网页开发技术事件，实现动画提示效果$('.正在加载')。ajaxStart(function(){ $(this)).' CSS('可见','可见');$(这个)。动画({ opacity: 1 }，0)；}).ajaxStop(函数(){ $(此)).动画({ opacity: 0 }，500)；});});用了数据()之后，当用户选择了下拉框，并不是直接奔着服务器请求而去的，而是先判断缓存是否为空，卡纳梅瑟选择。数据（卡纳梅).如果为空，则发起创建交互式、快速动态网页应用的网页开发技术请求，并将返回的结果放进缓存卡尔纳梅选择。数据（卡尔纳梅，数据).

如果它不为空，数据将获得vardata=carnameselect。循环添加选项节点之前，从缓存中取出数据(carname)。同样，image缓存被放入我们的Image对象中，var cacheimg=new Image()，这一行代码的第一行和第四行取出缓存中的图像并显示出来。

代码下载地址：https://github.com/shizongger/JqueryInAction

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。