真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

<ul id="ioag4"></ul>

<fieldset id="ioag4"><input id="ioag4"></input></fieldset>

重慶分公司

重慶分公司

028-86922220

jQuery如何實(shí)現(xiàn)級聯(lián)下拉框

這篇文章將為大家詳細(xì)講解有關(guān)jQuery如何實(shí)現(xiàn)級聯(lián)下拉框，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元吉水做網(wǎng)站,已為上家服務(wù),為吉水各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

效果功能如下：

jQuery如何實(shí)現(xiàn)級聯(lián)下拉框

頁面默認(rèn)只提供汽車廠商，當(dāng)選擇了具體的某品牌汽車，汽車類型下拉框就會(huì)動(dòng)態(tài)的顯示出來，選擇對應(yīng)的類型，然后出來該汽車類型對應(yīng)的輪胎類型下拉框顯示出來，選中輪胎類型，頁面的正中間會(huì)顯示出汽車的圖片。
思路分析如圖：

jQuery如何實(shí)現(xiàn)級聯(lián)下拉框

建立我們的html頁面，程序清單如下：

代碼清單1.1: chainSelect.jsp


 
 
 數(shù)據(jù)裝載中......

汽車廠商: 汽車類型: 車輪類型:

body體里面囊括了3個(gè)div，第一個(gè)div的作用是顯示“數(shù)據(jù)正在裝載中…”的圖片和文字。第二個(gè)div顯示級聯(lián)下拉效果。第三個(gè)div顯示車輛圖片。

css代碼如下:

代碼清單1.2:chainSelect.css

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

代碼清單1.3:chainSelect.js

$(document).ready(function(){
 //找到三個(gè)下拉框
 var carnameSelect = $(".carname").children("select");
 var cartypeSelect = $(".cartype").children("select");
 var wheeltypeSelect = $(".wheeltype").children("select");

 carnameSelect.change(function(){
 console.log("汽車廠商觸發(fā)onChange事件");
 });
 cartypeSelect.change(function(){
 console.log("汽車類型觸發(fā)onChange事件");
 });
 wheeltypeSelect.change(function(){
 console.log("車輪觸發(fā)onChange事件");
 });
});

首先用jQuery的class選擇器選擇出三個(gè)下拉的框，當(dāng)它們的值改變時(shí)觸發(fā)對應(yīng)的jQuery函數(shù)，對jQuery函數(shù)的處理才是重點(diǎn)的內(nèi)容。
首先說到j(luò)Query中的ajax交互。前一篇我們用到get()的請求方式，今天來用以用post()方法的請求方式。

jQuery.post(url, [data], [callback], [type])

概述:

通過遠(yuǎn)程 HTTP POST 請求載入信息.這是一個(gè)簡單的 POST 請求功
能以取代復(fù)雜ajax() 。請求成功時(shí)可調(diào)>用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請使用 $.ajax。

參數(shù)含義:

url:發(fā)送請求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時(shí)回調(diào)函數(shù)。
type:返回內(nèi)容格式，xml, html, script, json, text, _default。

案例如下:

代碼清單1.4：demo.js

$(document).ready(function(){
 //發(fā)起ajax請求
 $.post("../chainSelect", {name: "John", time: "2pm"}, function(data){
 console.log("name : " + data.name);
 console.log("type : " + data.type);
 }, "json");
});

后臺(tái)Serlvet處理如下(當(dāng)然你可以使用java框架，也可以使用其他后臺(tái)語言)。

代碼清單1.5:demo.java

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 {
 private static final long serialVersionUID = 1L;

 protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 System.out.println("name = " + request.getParameter("name"));
 System.out.println("time = " + request.getParameter("time"));

 response.setCharacterEncoding("UTF-8");
 response.setContentType("application/json; charset=utf-8");
 String jsonStr = "{\"name\":\"fly\",\"type\":\"蟲子\"}";
 PrintWriter out = null;
 try {
 out = response.getWriter();
 out.write(jsonStr);
 } catch (IOException e) {
 e.printStackTrace();
 } finally {
 if (out != null) {
 out.close();
 }
 }

 }

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

別忘了純Serlvet部屬要在你的web.xml做配置。我的Serlvet的完整路進(jìn)地址是:http://localhost:8080/JqueryStudy/chainSelect ,兩句System.out.println()輸出ajax傳遞過來的參數(shù)name和time。response.setCharacterEncoding(“UTF-8”)的作用是告訴瀏覽器字符串為utf-8的編碼，防止中文亂碼問題。response.setContentType(“application/json; charset=utf-8”)將返回的字符串以json格式形式返回。out對象是輸出流，如果返回的是數(shù)組，格式應(yīng)該如下：[“test1”, “test2”, “test3”]，如果是json類，則格式如下：{“name”:”fly”,”type”:”蟲子”}。

上訴案例返回的是json對象,后臺(tái)控制臺(tái)輸出:

name = John
time = 2pm

前端瀏覽器的控制臺(tái)輸出:

name : fly
type : 蟲子

Servlet返回?cái)?shù)組的案例如下：

代碼清單1.6:demo.java

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 {
 private static final long serialVersionUID = 1L;

 protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 System.out.println("name = " + request.getParameter("name"));
 System.out.println("time = " + request.getParameter("time"));

 response.setCharacterEncoding("UTF-8");
 response.setContentType("application/json; charset=utf-8");
 String jsonStr = "[\"test1\", \"test2\", \"test3\"]";
 PrintWriter out = null;
 try {
 out = response.getWriter();
 out.write(jsonStr);
 } catch (IOException e) {
 e.printStackTrace();
 } finally {
 if (out != null) {
 out.close();
 }
 }

 }

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

前端jQuery代碼:

$(document).ready(function(){
 //發(fā)起ajax請求
 $.post("../chainSelect", {name: "John", time: "2pm"}, function(data){
 for(var i = 0; i < data.length; i++) {
 console.log((i+1) + " : " + data[i]);
 }
 }, "json");
});

后臺(tái)之需要給jsonStr賦值為數(shù)組格式而已，而前端jQuery代碼由于接收到的字符串?dāng)?shù)組，所以這里需要用遍歷數(shù)組的形式來遍歷。

本案例的Servlet代碼清單：

代碼清單1.7:ChainSelect.java

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 {
 private static final long serialVersionUID = 1L;

 protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("application/json; charset=utf-8");
 String jsonStr = this.getStr(request.getParameter("keyword"), request.getParameter("type"));
 PrintWriter out = null;
 try {
 out = response.getWriter();
 out.write(jsonStr);
 } catch (IOException e) {
 e.printStackTrace();
 } finally {
 if (out != null) {
 out.close();
 }
 }

 }

 private String getStr(String keyword, String type) {
 String jsonStr = "";
 if("top".equals(type)) {
 if("BMW".equals(keyword)) {
 jsonStr = "[\"316ti\", \"6ercupe\"]";
 } else if("Audi".equals(keyword)) {
 jsonStr = "[\"tt\"]";
 } else if("VW".equals(keyword)) {
 jsonStr = "[\"Golf4\"]";
 }
 } else if("sub".equals(type)) {
 if("tt".equals(keyword)) {
 jsonStr = "[\"rha\", \"rhb\", \"rhc\"]";
 } else if("316ti".equals(keyword)) {
 jsonStr = "[\"rha\", \"rhb\"]";
 } else if("6ercupe".equals(keyword)) {
 jsonStr = "[\"rha\", \"rhb\", \"rhc\"]";
 } else if("Golf4".equals(keyword)) {
 jsonStr = "[\"rha\", \"rhb\"]";
 }
 }
 return jsonStr;
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 doGet(request, response);
 }
}

代碼清單1.7與清單1.6的區(qū)別是，后者多了getStr()的方法，該方法用于判斷前端傳遞過來的是一級(top)下拉框的值，還是二級(sub)下拉框的值，并根據(jù)傳遞的keyword返回需要的字符串。與本后臺(tái)交互的是程序清單1.8所示的代碼。

程序清單1.8:chainSelect.js

/**
 * 級聯(lián)下拉框效果
 */

$(document).ready(function(){
 //找到三個(gè)下拉框
 var carnameSelect = $(".carname").children("select");
 var cartypeSelect = $(".cartype").children("select");
 var wheeltypeSelect = $(".wheeltype").children("select");

 carnameSelect.change(function(){
 var carname = carnameSelect.val();
 if(carname != "") {
 //汽車廠商不為空發(fā)起ajax請求
 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
 if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  cartypeSelect.html("");
  $("請選擇汽車類型").appendTo(cartypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(cartypeSelect);
  }
  $(".cartype").show();
  carnameSelect.next("img").show();
 }
 }, "json");
 } else {
 //3.如果值為空，那么第二個(gè)下拉框所在span要隱藏起來，第一個(gè)下拉框后面的指示圖片也要隱藏
 $(".cartype").hide();
 $(".wheeltype").hide();
 $(".carimage").hide();
 $(this).next("img").hide();
 }
 });

 cartypeSelect.change(function(){
 var cartype = cartypeSelect.val();
 if(cartype != "") {
 //汽車類型不為空發(fā)起ajax請求
 $.post("../chainSelect", {keyword: cartype, type : "sub"}, function(data){
 if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  wheeltypeSelect.html("");
  $("請選擇車輪類型").appendTo(wheeltypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(wheeltypeSelect);
  }
  $(".wheeltype").show();
  cartypeSelect.next("img").show();
 }
 }, "json");
 } else {
 //汽車類型為空
 $(".wheeltype").hide();
 $(".carimage").hide();
 $(this).next("img").hide();
 } 
 });

 wheeltypeSelect.change(function(){
 //選中的車輪類型
 var wheeltype = wheeltypeSelect.val();

 if(wheeltype != "") {
 //選中的車輛廠商
 var carname = carnameSelect.val();
 //選中的車輛類型
 var cartype = cartypeSelect.val();

 //圖片的名稱
 var carimgName = carname + "_" + cartype + "_" + wheeltype + ".jpg";
 console.log("carimgName : " + carimgName);

 $(".carimage").show();

 $(".carimg").attr("src", "../image/" + carimgName).load(function(){
 //隱藏loading圖片
 $(".carloading").hide("slow");
 });
 $(".carimage p img").show("slow");
 } else {
// alert("內(nèi)容為空");
// $("img").hide();
 $(".carimage").hide();
 }
 });

 //給數(shù)據(jù)裝載中的節(jié)點(diǎn)定義ajax事件，實(shí)現(xiàn)動(dòng)畫提示效果
 $(".loading").ajaxStart(function(){
 $(this).css("visibility", "visible");
 $(this).animate({
 opacity: 1
 },0);
 }).ajaxStop(function(){
 $(this).animate({
 opacity: 0
 },500);
 });
});

jQuery代碼的思路是，用class選擇器選擇出三個(gè)下拉框，賦值給變量carnameSelect，cartypeSelect，wheeltypeSelect，默認(rèn)carnameSelect下拉框是顯示的，其他下拉框是隱藏。然后給他們?nèi)咦詂hange()事件，當(dāng)用戶選擇下拉框的值的時(shí)候執(zhí)行事件函數(shù)體里面的內(nèi)容。這里我以第一級下拉框?yàn)槔齺碇v解處理的過程。如果用戶選擇了第一級下拉框”汽車廠商”的”寶馬”，則執(zhí)行如下代碼：

 carnameSelect.change(function(){
 var carname = carnameSelect.val();
 if(carname != "") {
 //汽車廠商不為空發(fā)起ajax請求
 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
 if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  cartypeSelect.html("");
  $("請選擇汽車類型").appendTo(cartypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(cartypeSelect);
  }
  $(".cartype").show();
  carnameSelect.next("img").show();
 }
 }, "json");
 } else {
 //3.如果值為空，那么第二個(gè)下拉框所在span要隱藏起來，第一個(gè)下拉框后面的指示圖片也要隱藏
 $(".cartype").hide();
 $(".wheeltype").hide();
 $(".carimage").hide();
 $(this).next("img").hide();
 }
 });

先將第一級下拉框內(nèi)容取出來，如果值為空，那么第二個(gè)下拉框所在span要隱藏起來，第一個(gè)下拉框后面的指示圖片也要隱藏。如果有內(nèi)容，則用該行代碼$.post(“../chainSelect”, {keyword: carname, type : “top”}, function(data){}, “json”）向上訴的Serlvet發(fā)起post請求，post的第一個(gè)參數(shù)是Serlvet的后臺(tái)地址，第二個(gè)參數(shù)畫括號括起來的json數(shù)據(jù)，第三個(gè)參數(shù)是回調(diào)函數(shù)，第四個(gè)參數(shù)”json”表明發(fā)送的json數(shù)據(jù)。在回調(diào)函數(shù)中，參數(shù)data接收Serlvet返回的值，由于Serlvet返回的是可以解析為字符串?dāng)?shù)組的數(shù)據(jù)，所以用for循環(huán)來遍歷得到的數(shù)據(jù)，并生成option新節(jié)點(diǎn)appenTo()插入到select之后。

程序清單1.8中，值得注意的地方還有$(“.loading”).ajaxStart(function(){}).ajaxStop(function(){}),這是為了美化汽車圖片加載的代碼。這里用到j(luò)Query的動(dòng)畫專用效果的animate()，使程序淡入淡出更加的和諧。

到此幾乎把級聯(lián)效果實(shí)現(xiàn)了，但是如果在高并發(fā)環(huán)境下，每次用戶切換選項(xiàng)都向服務(wù)器發(fā)送請求，服務(wù)器的壓力可能過大。所以這里我們用jQuery的緩存來保存那些已經(jīng)緩存過的請求。可以使用jQuery的data()方法。

定義和用法

從被選元素中返回附加的數(shù)據(jù)。

$(selector).data(name)

name 可選。規(guī)定要取回的數(shù)據(jù)的名稱。
如果沒有規(guī)定名稱，則該方法將以對象的形式從元素中返回所有存儲(chǔ)的數(shù)據(jù)。

向元素附加數(shù)據(jù)

$(selector).data(name,value)

name 必需。規(guī)定要設(shè)置的數(shù)據(jù)的名稱。
value 必需。規(guī)定要設(shè)置的數(shù)據(jù)的值。
data()的使用案例如程序清單1.9：





$(document).ready(function(){
 $("#btn1").click(function(){
 $("div").data("greeting", "Hello World");
 });
 $("#btn2").click(function(){
 alert($("div").data("greeting"));
 });
});



把數(shù)據(jù)添加到 div 元素
獲取已添加到 div 元素的數(shù)據(jù)

加上緩存之后的完整jQuery代碼如下程序清單。
程序清單2.0：chainSelect.js

/**
 * 級聯(lián)下拉框效果
 */

$(document).ready(function(){
 //找到三個(gè)下拉框
 var carnameSelect = $(".carname").children("select");
 var cartypeSelect = $(".cartype").children("select");
 var wheeltypeSelect = $(".wheeltype").children("select");

 carnameSelect.change(function(){
 var carname = carnameSelect.val();
 if(carname != "") {
 if (!carnameSelect.data(carname)) {
 //汽車廠商不為空發(fā)起ajax請求
 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
  if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  cartypeSelect.html("");
  $("請選擇汽車類型").appendTo(cartypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(cartypeSelect);
  }
  $(".cartype").show();
  carnameSelect.next("img").show();
  }
  //將data放入緩存
  carnameSelect.data(carname, data);
 }, "json");
 } else {
 //從緩存中取出數(shù)據(jù)
 var data = carnameSelect.data(carname);
 if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  cartypeSelect.html("");
  $("請選擇汽車類型").appendTo(cartypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(cartypeSelect);
  }
  $(".cartype").show();
  carnameSelect.next("img").show();
 }
 }
 } else {
 //3.如果值為空，那么第二個(gè)下拉框所在span要隱藏起來，第一個(gè)下拉框后面的指示圖片也要隱藏
 $(".cartype").hide();
 $(".wheeltype").hide();
 $(".carimage").hide();
 $(this).next("img").hide();
 }
 });

 cartypeSelect.change(function(){
 var cartype = cartypeSelect.val();
 if(cartype != "") {
 if(!cartypeSelect.data(cartype)) {
 //汽車類型不為空發(fā)起ajax請求
 $.post("../chainSelect", {keyword: cartype, type : "sub"}, function(data){
  if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  wheeltypeSelect.html("");
  $("請選擇車輪類型").appendTo(wheeltypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(wheeltypeSelect);
  }
  $(".wheeltype").show();
  cartypeSelect.next("img").show();
  }
  cartypeSelect.data(cartype, data);
 }, "json");
 } else {
 var data = cartypeSelect.data(cartype);
 if(data != null && data.length != 0) {
  //清除上一次change的內(nèi)容
  wheeltypeSelect.html("");
  $("請選擇車輪類型").appendTo(wheeltypeSelect);
  for(var i = 0; i < data.length; i++) {
  $(""+data[i]+"").appendTo(wheeltypeSelect);
  }
  $(".wheeltype").show();
  cartypeSelect.next("img").show();
 }
 }
 } else {
 //汽車類型為空
 $(".wheeltype").hide();
 $(".carimage").hide();
 $(this).next("img").hide();
 } 
 });

 wheeltypeSelect.change(function(){
 //選中的車輪類型
 var wheeltype = wheeltypeSelect.val(); 
 if(wheeltype != "") {
 //選中的車輛廠商
 var carname = carnameSelect.val();
 //選中的車輛類型
 var cartype = cartypeSelect.val();

 //圖片的名稱
 var carimgName = carname + "_" + cartype + "_" + wheeltype + ".jpg";

 $(".carimage").show(); 
 //通過Javascript中的Image對象預(yù)裝載圖片
 var cacheimg = new Image();
 $(cacheimg).attr("src", "../image/" + carimgName).load(function(){
 //隱藏loading圖片
 $(".carloading").hide("slow");
 $(".carimg").attr("src", "../image/" + carimgName);
 });


 $(".carimage p img").show("slow");
 } else {
 $(".carimage").hide();
 }
 });

 //給數(shù)據(jù)裝載中的節(jié)點(diǎn)定義ajax事件，實(shí)現(xiàn)動(dòng)畫提示效果
 $(".loading").ajaxStart(function(){
 $(this).css("visibility", "visible");
 $(this).animate({
 opacity: 1
 },0);
 }).ajaxStop(function(){
 $(this).animate({
 opacity: 0
 },500);
 });
});

用了data()之后，當(dāng)用戶選擇了下拉框，并不是直接奔著服務(wù)器請求而去的，而是先判斷緩存是否為空，carnameSelect.data(carname)。如果為空，則發(fā)起ajax請求，并將返回的結(jié)果放進(jìn)緩存carnameSelect.data(carname, data)。如果不為空，在循環(huán)添加option節(jié)點(diǎn)之前data從緩存中拿到var data = carnameSelect.data(carname)。同樣的，圖片的緩存放進(jìn)我們的Image對象中var cacheimg = new Image(),這行代碼往后的第一行和第四行將緩存中的圖片取出并顯示出來。

關(guān)于“jQuery如何實(shí)現(xiàn)級聯(lián)下拉框”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)站欄目：jQuery如何實(shí)現(xiàn)級聯(lián)下拉框
網(wǎng)頁URL：http://weahome.cn/article/pjoiso.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部

<abbr id="ewo4a"><sup id="ewo4a"></sup></abbr>

<button id="ewo4a"><kbd id="ewo4a"></kbd></button>

<tfoot id="ewo4a"></tfoot>

<ul id="ewo4a"></ul>