jquery下拉聯(lián)動,下拉聯(lián)動列表
JS與Jquery之動態(tài)添加下拉框select并級聯(lián)改變事件
1.可以動態(tài)添加多個下拉框,可減少下拉框
云龍網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
2.選中第一個下拉框的任意一個值，同時第三個下拉框的值跟著改變，顯示對應(yīng)的數(shù)據(jù)。
ps:what?光動態(tài)添加就足以。。。。賦值還不能直接賦，而是添加下拉時就賦值。。。。。經(jīng)過百般折磨，頭發(fā)掉了n根，最終通過巧妙的思路解決了，在此記錄下。若對你有所幫助，點贊加關(guān)注吧！后續(xù)及時更新。
第一個下拉選項顯示
選擇下拉項，同時加載數(shù)據(jù)到第三個下拉框
注：在這里直接去掉了第二行的標簽
為了獲取改變數(shù)據(jù)的行，試了很久，動態(tài)生成的下拉框無法獲取到索引，所以才想到了使用id，并且給id后加一個數(shù)字
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();
}
//復(fù)制下拉框一給下拉框二
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();
}
//復(fù)制下拉框一給下拉框二
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;
//獲取選中項的內(nèi)容
//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;
//獲取選中項的內(nèi)容
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實現(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.獲取當(dāng)前汽車廠商下拉框所有選中的值
var?carnameValue?=?$(this).val();
//把wheeltypeSelect隱藏起來，并且把第二個下拉框并列的圖片隱藏
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
//如果值不為空?則向服務(wù)器發(fā)送請求
if(carnameValue!=""){
//用post給服務(wù)器發(fā)送信息
//第一個參數(shù)是請求的url?第二個參數(shù)是請求發(fā)送的數(shù)據(jù)并且以post發(fā)送，第三個參數(shù)是回調(diào)函數(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ù)緩沖起來，下次從緩沖中去取，取不到的再跟服務(wù)器進行交互，取到就直接使用，以此來減輕服務(wù)器的壓力
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++){
//存在一個元素，汽車類型的下拉框就應(yīng)該多一個元素?所以又一個元素就創(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.獲取當(dāng)前汽車類型下拉框所有選中的值
var?cartypeValue?=?$(this).val();
//隱藏汽車圖片attr：先清空上次src圖片路徑避免下一次先顯示一次.
$(".carimg").hide().attr("src","");
$(".carimage").hide();
//2.如果值不為空就向服務(wù)器發(fā)送請求
if(cartypeValue!=""){
if(!cartypeSelect.data(cartypeValue)){
$.post("SelectServlet",{keyword:cartypeValue,type:"sub"},function(data){
//可以獲得請求數(shù)據(jù)進行分析處理???,將來在Servlet中數(shù)據(jù)是以字符串?dāng)?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++){
//存在一個元素，汽車類型的下拉框就應(yīng)該多一個元素?所以又一個元素就創(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++){
//存在一個元素，汽車類型的下拉框就應(yīng)該多一個元素?所以又一個元素就創(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對圖片進行預(yù)裝載
//js對象
$(".carimg").hide();
$(".carimage").show();
$(".carload").show();
var?catchimg?=?new?Image();
//如何轉(zhuǎn)換為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)動,下拉聯(lián)動列表
網(wǎng)頁鏈接：http://muchs.cn/article34/phecpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站建設(shè)、標簽優(yōu)化、網(wǎng)站建設(shè)、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站設(shè)計與網(wǎng)站制作做好重要敏感信息保護不可少 2022-05-22
- 哪些行業(yè)小程序很賺錢？ 2014-03-03
- 網(wǎng)站頁面設(shè)計 有幾個標準要達到才能提升用戶體驗 2017-02-17
- 網(wǎng)站制作之前請先明確網(wǎng)站目標 2020-06-12
- 網(wǎng)站制作過程中如何做好視覺設(shè)計 2016-08-19
- 淺析APP開發(fā)的幾大類型 2016-01-31
- SEO關(guān)鍵詞優(yōu)化成敗的決定性因素是什么 2016-11-24
- 網(wǎng)站制作開發(fā)必知的步驟 2022-11-19
- 營銷型網(wǎng)站制作要避免的導(dǎo)航設(shè)計錯誤 2022-06-27
- 營銷型網(wǎng)站用模板網(wǎng)站制作好嗎? 2022-08-08
- 網(wǎng)站制作的流程及注意事項 新手小白看過來 2021-04-23
- 成都電子商務(wù)網(wǎng)站建設(shè)的特點 2017-01-03