用jquery實現(xiàn)三級下拉菜單聯(lián)動時，菜單三無法顯示。

class_array是一個二維數(shù)組，看你代碼的意思。。當?shù)?個下拉菜單

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供石門網(wǎng)站建設、石門做網(wǎng)站、石門網(wǎng)站設計、石門網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、石門企業(yè)網(wǎng)站模板建站服務，十年石門做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

觸發(fā)change事件時，即

if(v[2]==$("#pard1").val())

$("option

value='"+v[0]+"'"+v[1]+"/option").appendTo($("#pard2"));

這是表示傳入的數(shù)組v的第三個元素等于第1個下拉菜單的值時，才會將第2個下拉菜單填充。

我看v數(shù)組的第三個元素的值有0,1,14，但是又要與第1個下拉菜單的值相等的唯有class_array[0]=new

Array('1','護膚','0');所以，在第1個下拉菜單選擇'護膚'才會對第二個下拉菜單有聯(lián)動效果

jQuery如何實現(xiàn)下拉框的二級聯(lián)動？

給你一個三級聯(lián)動的，你你參考一下

script language="JavaScript" type="text/javascript"

function createCode()

{

//數(shù)組賦值

var varname = new Array(4);

varname[0] = "請選擇";

varname[1] = "紅色";

varname[2] = "黃色";

varname[3] = "藍色";

//下拉框賦值

for(var i=0;i4;i++)

{

document.getElementById('xlk1').options[i] = new Option(varname[i],i);

}

copy();

}

//復制下拉框一給下拉框二

function copy()

{

for(i=0;idocument.getElementById("xlk1").options.length;i++)

{

document.getElementById('xlk2').options[i] = new Option(document.getElementById("xlk1").options[i].text,i)

}

copytwo();

}

//復制下拉框一給下拉框二

function copytwo()

{

for(i=0;idocument.getElementById("xlk2").options.length;i++)

{

document.getElementById('xlk3').options[i] = new Option(document.getElementById("xlk2").options[i].text,i)

}

}

function onChange1()

{

//獲取下拉框1的選中項

var strid=document.getElementById("xlk1").value;

//獲取選中項的內容

//var strtxt=document.getElementById("xlk1").options[window.document.getElementById("xlk1").selectedIndex].text;

//獲取指定ID下拉框的項總數(shù)

//var strnub=document.getElementById("xlk1").options.length;

copy();

if(strid != 0)

{

document.getElementById("xlk2").options.remove(strid);

document.getElementById("xlk3").options.remove(strid);

}

document.getElementById("textfield").value=strid+strtxt+strnub;

}

function onChange2()

{

//獲取下拉框1的選中項

var strid2=document.getElementById("xlk2").selectedIndex;

//獲取選中項的內容

var strtxt2=document.getElementById("xlk2").options[window.document.getElementById("xlk2").selectedIndex].text;

//獲取指定ID下拉框的項總數(shù)

var strnub2=document.getElementById("xlk2").options.length;

copytwo();

if(strid2 != 0)

{

document.getElementById("xlk3").options.remove(strid2);

}

}

/script

body onLoad="createCode()"

form id="form1" name="form1" method="post" action=""

select name="xlk1" id="xlk1" onChange="onChange1()"/select

select name="xlk2" id="xlk2" onChange="onChange2()"/select

select name="xlk3" id="xlk3"/select

/form

jquery select2 聯(lián)動下拉列表賦值二級下拉列表賦不上值，怎么搞

你是怎么搞的，代碼貼出來看看。

二級聯(lián)動，都是在一級上加一個onchange事件，觸發(fā)時更新二級就可以了。

selelct id="sel1" onchange="changeData()"/selelct

selelct id="sel2"/selelct

function changeData(){

var v = $("#sel1").val();

$("#sel2").html('option......../option');

}

怎樣用jquery實現(xiàn)3級聯(lián)動下拉框

HTML部分如下：

!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"

""

html

head

title/title

script?type="text/javascript"?src="jslib/jquery.js"/script

script?type="text/javascript"?src="jslib/select.js"/script

link?rel="stylesheet"?type="text/css"?href="mycss/select.css"

/head

body

div?class="loading"

pimg?src="images/data-loading.gif"?alt="數(shù)據(jù)加載中"/p

p?數(shù)據(jù)加載中.../p

/div

div?class="car"?

span?class="carname"?汽車廠商:

select

option?value=""?selected請選擇汽車廠商/option

option?value="BMW"寶馬/option

option?value="Audi"奧迪/option

option?value="VW"大眾/option

/select

img?src="images/pfeil.gif"?alt="數(shù)據(jù)"/span

span?class="cartype"?汽車類型:

select/select

img?src="images/pfeil.gif"?alt="數(shù)據(jù)"/span

span?class="wheeltype"輪胎類型:

select/select?/span

/div

div?class="carimage"

img?src="images/img-loading.gif"?class="carload"/

img?src=""?class="carimg"/

/div

/body

/html

CSS部分如下：

.loading{

text-align:center;

visibility:hidden;?

}

p,.car,.carimage{

text-align:center;

}

.cartype,.wheeltype,.car img,.carimage,.carload{

display:none;

}

js部分如下：

$(function(){

//得到三個下拉框

var?carnameSelect?=?$(".carname").children("select");

var?cartypeSelect?=?$(".cartype").children("select");

var?wheeltypeSelect?=?$(".wheeltype").children("select");

//給三個下拉框加下拉框的改變事件

carnameSelect.change(function(){

//1.獲取當前汽車廠商下拉框所有選中的值

var?carnameValue?=?$(this).val();

//把wheeltypeSelect隱藏起來，并且把第二個下拉框并列的圖片隱藏

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

//如果值不為空?則向服務器發(fā)送請求

if(carnameValue!=""){

//用post給服務器發(fā)送信息

//第一個參數(shù)是請求的url?第二個參數(shù)是請求發(fā)送的數(shù)據(jù)并且以post發(fā)送，第三個參數(shù)是回調函數(shù)就收返回數(shù)據(jù)，數(shù)據(jù)就在函數(shù)的參數(shù)中

//第四個參數(shù)是請求返回的數(shù)據(jù)格式默認是html

if(!carnameSelect.data(carnameValue)){

$.post("SelectServlet",{keyword:carnameValue,type:"top"},function(data){

if(data.length!=0){

cartypeSelect.html("");

$("option?value=''請選擇汽車類型/option").appendTo(cartypeSelect);

for(var?i=0;idata.length;i++){

$("option?value='"+data[i]+"'"+data[i]+"/option").appendTo(cartypeSelect);

}

//追加完成后，需要顯示第二個下拉框和第一個下拉框后的圖片

cartypeSelect.parent().show();

carnameSelect.next().show();

}else{

//如果是0?說明沒有數(shù)據(jù)要返回。

//第二個下拉框隱藏，第一個下拉框后的圖片隱藏。

cartypeSelect.parent().hide();

carnameSelect.next().hide();

}

//把數(shù)據(jù)緩沖起來，下次從緩沖中去取，取不到的再跟服務器進行交互，取到就直接使用，以此來減輕服務器的壓力

carnameSelect.data(carnameValue,data);

},"json");

}else{

var?data?=?carnameSelect.data(carnameValue);

if(data.length!=0){

//遍歷這個數(shù)組元素

cartypeSelect.html("");

$("option?value=''請選擇汽車類型/option").appendTo(cartypeSelect);

for(var?i=0;idata.length;i++){

//存在一個元素，汽車類型的下拉框就應該多一個元素?所以又一個元素就創(chuàng)建一個option節(jié)點，并且追加給汽車類型下拉框

$("option?value='"+data[i]+"'"+data[i]+"/option").appendTo(cartypeSelect);

}

//追加完成后，需要顯示第二個下拉框和第一個下拉框的圖片

cartypeSelect.parent().show();

carnameSelect.next().show();

}else{

//如果是0?說明沒有數(shù)據(jù)要返回。

//第二個下拉框隱藏，第一個下拉框后的圖片隱藏。

cartypeSelect.parent().hide();

carnameSelect.next().show();

}

}

}else{

//如果carnameValue為空?也就是說選擇的汽車廠商沒有，那么第二個下拉框，和第一個下拉框后的圖片還得繼續(xù)隱藏

cartypeSelect.parent().hide();

//獲取汽車廠商的下一個兄弟節(jié)點

carnameSelect.next().hide();

}

});

cartypeSelect.change(function(){

//1.獲取當前汽車類型下拉框所有選中的值

var?cartypeValue?=?$(this).val();

//隱藏汽車圖片attr：先清空上次src圖片路徑避免下一次先顯示一次.

$(".carimg").hide().attr("src","");

$(".carimage").hide();

//2.如果值不為空就向服務器發(fā)送請求

if(cartypeValue!=""){

if(!cartypeSelect.data(cartypeValue)){

$.post("SelectServlet",{keyword:cartypeValue,type:"sub"},function(data){

//可以獲得請求數(shù)據(jù)進行分析處理???,將來在Servlet中數(shù)據(jù)是以字符串數(shù)組的方式返回的

//如果返回數(shù)據(jù)的長度不是0?對數(shù)據(jù)進行分析

if(data.length!=0){

//遍歷此數(shù)組元素

wheeltypeSelect.html("");

$("option?value=''請選擇汽車類型/option").appendTo(wheeltypeSelect);

for(var?i=0;idata.length;i++){

//存在一個元素，汽車類型的下拉框就應該多一個元素?所以又一個元素就創(chuàng)建一個option節(jié)點，并且追加給汽車類型下拉框

$("option?value='"+data[i]+"'"+data[i]+"/option").appendTo(wheeltypeSelect);

}

//追加完成后，需要顯示第三個下拉框和第二個下拉框后的圖片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

}else{

//如果是0?說明沒有數(shù)據(jù)要返回。

//第3個下拉框隱藏，第2個下拉框后的圖片隱藏。

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

//把data數(shù)據(jù)緩沖起來

cartypeSelect.data(cartypeValue,data);

},"json");

}else{

var?data?=?cartypeSelect.data(cartypeValue);

if(data.length!=0){

//遍歷這個數(shù)組元素

wheeltypeSelect.html("");

$("option?value=''請選擇汽車類型/option").appendTo(wheeltypeSelect);

for(var?i=0;idata.length;i++){

//存在一個元素，汽車類型的下拉框就應該多一個元素?所以又一個元素就創(chuàng)建一個option節(jié)點，并且追加給汽車類型下拉框

$("option?value='"+data[i]+"'"+data[i]+"/option").appendTo(wheeltypeSelect);

}

//追加完成后，需要顯示第三個下拉框和第二個下拉框后的圖片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

//追加完成后，需要顯示第三個下拉框和第二個下拉框后的圖片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

}else{

//如果是0?說明沒有數(shù)據(jù)要返回。

//第3個下拉框隱藏，第2個下拉框后的圖片隱藏。

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

}

}else{

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

});

wheeltypeSelect.change(function(){

//取得選中的車輪類型的值

var?wheeltypeValue?=?$(this).val();

//取得圖片的名稱

var?imagename?=?carnameSelect.val()+"_"+cartypeSelect.val()+"_"+wheeltypeValue+".jpg";

//$(".carimg").attr("src","images/"+imagename);

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

//js對圖片進行預裝載

//js對象

$(".carimg").hide();

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

$(".carload").show();

var?catchimg?=?new?Image();

//如何轉換為jquery對象并處理

$(catchimg).attr("src","images/"+imagename).load(function(){

//隱藏loading圖片

$(".carload").hide();

//顯示汽車圖片

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

$(".carimg").attr("src","images/"+imagename).show();

});

});

//動畫效果

$(".loading").ajaxStart(function(){

$(".loading").css("visibility","visible");

$(this).animate({

opacity:1

},0);

}).ajaxStop(function(){

$(this).animate({

opacity:0

},500);

});

});

//別忘了引用jquery.js

當前名稱：jquery下拉聯(lián)動,js 下拉框聯(lián)動
標題鏈接：http://aaarwkj.com/article44/dssgoee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、關鍵詞優(yōu)化、面包屑導航、云服務器、全網(wǎng)營銷推廣、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)