js控制option的隱多級(jí)聯(lián)動(dòng)
來源:易賢網(wǎng) 閱讀:1053 次 日期:2016-06-17 09:23:02
溫馨提示:易賢網(wǎng)小編為您整理了“js控制option的隱多級(jí)聯(lián)動(dòng)”,方便廣大網(wǎng)友查閱!

二級(jí)聯(lián)動(dòng),簡單的說就是,當(dāng)下拉列表a1的的值改變時(shí),下一級(jí)下拉列表b1也跟著動(dòng),但是下拉列表b1的值是與下拉列表a1的值相對(duì)應(yīng)的。比如:a1選中“技術(shù)部”的話,b1的所有下拉項(xiàng)都顯示的是與a1相對(duì)應(yīng)的技術(shù)部成員,這個(gè)過程因?yàn)槎际窃诳蛻舳藞?zhí)行的不會(huì)在服務(wù)器端操作所以是無刷新實(shí)現(xiàn)的。

三級(jí)聯(lián)動(dòng)或多級(jí)聯(lián)動(dòng),就是利用二級(jí)聯(lián)動(dòng)的思想,第一級(jí)改變時(shí),第二級(jí)跟著變,第三級(jí)跟著第二級(jí)變,第四級(jí)跟著第三級(jí)變。。。。

二級(jí)聯(lián)動(dòng),三級(jí)聯(lián)動(dòng),多級(jí)聯(lián)動(dòng)實(shí)踐:

二級(jí)聯(lián)動(dòng),當(dāng)?shù)谝患?jí)選中一個(gè)改變選項(xiàng),激發(fā)聯(lián)動(dòng)函數(shù),這個(gè)函數(shù)用以改變第二個(gè)下拉列表的值,實(shí)現(xiàn)過程是,根據(jù)第一級(jí)傳過來的值遍歷數(shù)組,找到與第一級(jí)相對(duì)應(yīng)的選項(xiàng),然后加到第二級(jí)列表上。

三級(jí)聯(lián)動(dòng)或多級(jí)聯(lián)動(dòng),第一級(jí)改變時(shí),第二級(jí)跟著變,第二級(jí)改變時(shí),第三級(jí)跟著變。

二級(jí)聯(lián)動(dòng)下拉列表的實(shí)現(xiàn)是通過一個(gè)函數(shù)來實(shí)現(xiàn)的,如果在實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉列表或多級(jí)聯(lián)動(dòng)下拉列表的話,我們是直接復(fù)制二級(jí)聯(lián)動(dòng)下拉列表的函數(shù),改一下函數(shù)名及相關(guān)參數(shù),這樣是可以解決問題的,但咱們是做程序的,應(yīng)該讓自己的程序更通用話,盡量適應(yīng)各種情況,如果這樣一來,平白的又添加了一個(gè)函數(shù),并且如果是多級(jí)的話您就得重寫這個(gè)函數(shù)多次,然而,您也許會(huì)想到,多級(jí)聯(lián)動(dòng)下拉列表與二級(jí)其實(shí)思想是一樣的,那么我們?yōu)槭裁床荒苡靡粋€(gè)函數(shù)來實(shí)現(xiàn)呢,并且一定是可以實(shí)現(xiàn)的,但這樣實(shí)現(xiàn)的人很少,為什么呢,一般都覺得沒這個(gè)必要,但每次遇到這樣的問題時(shí)還是得研究半天,今天我要給大家介紹的是,一個(gè)函數(shù)來實(shí)現(xiàn)多級(jí)聯(lián)動(dòng),使用的是類似與遞歸的思想,每一級(jí)onchange()時(shí)都會(huì)調(diào)用一個(gè)函數(shù),這個(gè)函數(shù)會(huì)改變下一級(jí)的值并激發(fā)其onchange(),這時(shí)下一級(jí)的onchange里如果還是調(diào)用這個(gè)函數(shù)的話,那么這個(gè)函數(shù)還會(huì)再次運(yùn)行,直到最后一級(jí),因?yàn)樽詈笠患?jí)onchange=所以他不會(huì)再激發(fā)下一級(jí),完成所有聯(lián)動(dòng)。

數(shù)組數(shù)據(jù)源可以接受兩種:  

1.[categoryname,parentcategoryname]  即:[當(dāng)前名稱,父級(jí)名稱]  

2.['categoryname','parentid','nowid']    即:[當(dāng)前名稱,父級(jí)id,當(dāng)前id]  

上面說的父級(jí),如果本身就是最上一級(jí),那么父級(jí)就寫成0或0  

調(diào)用方法:  

網(wǎng)頁各級(jí)聯(lián)(聯(lián)動(dòng))下拉列表必須含有兩個(gè)屬性:id,onchange.  

最后一個(gè)下拉列表onchange=(空,但必須寫上)。  

函數(shù)調(diào)用方法:changeselect(上一級(jí)的值,下一級(jí)select控件的id值,下一級(jí)select控件要選中的值(即value而非text),數(shù)據(jù)源數(shù)組名,默認(rèn)顯示字符(如:請(qǐng)選擇...如果不寫的話會(huì)用默認(rèn)值填充)),  

舉例:  

第一級(jí)<select id=province  onchange=changeselect(this.value,'city','',arrcity3,'請(qǐng)選擇市') ></select>  

第二級(jí)<select id=city onchange=changeselect(this.value,'area','',arrcity3) ></select>  

第三級(jí)<select id=area onchange= ></select>  

設(shè)置網(wǎng)頁加載完后運(yùn)行一次,可以設(shè)置默認(rèn)值,默認(rèn)狀態(tài)下第一個(gè)參數(shù)是0 

看代碼:

<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >

<html xmlns=>

<head>

<meta http-equiv=content-type content=text/html; charset=gb2312 />

<title>無標(biāo)題文檔</title>

<script language=javascript type=text/javascript>

//changeselect(上一級(jí)的值,下一級(jí)select控件的id值,下一級(jí)select控件要選中的值(即value而非text),數(shù)據(jù)源數(shù)組名,默認(rèn)顯示字符(如:請(qǐng)選擇...如果不寫的話會(huì)用默認(rèn)值填充)),第一級(jí)的上級(jí)值為0

function changeselect(parentvalue, nextid, nextselectedvalue, arrobj,defaultstr)

{

strobj = eval(document.getelementbyid(nextid));

strobj.length = 0;

//判斷它是二級(jí)數(shù)據(jù)源,還是三級(jí)

if (arrobj.length > 0)

{

if (arrobj[0].length == 2)

{arrnum = 0;}

else

{arrnum = 2;}

}

//顯示所有列表

for (i = 0; i < arrobj.length; i++)

{

if (i == 0)

{

if (defaultstr == undefined ) defaultstr===請(qǐng)選擇==;

strobj.options[strobj.length] = new option(defaultstr, );

}

if (arrobj[i][1] == parentvalue)

{

strobj.options[strobj.length] = new option(arrobj[i][0],arrobj[i][arrnum]);

}

}

//選中列表內(nèi)某一項(xiàng)

for (i = 0; i < strobj.length; i++)

{

if (strobj.options[i].value == nextselectedvalue)

{

strobj.options[i].selected = true;

}

}

//激發(fā)下一級(jí)的onchange事件以實(shí)現(xiàn)多級(jí)級(jí)聯(lián)

strobj.onchange();

}

//公司二維數(shù)組數(shù)據(jù)源

office = [

[categoryname,parentcategoryname],

[業(yè)務(wù)部,0],

[技術(shù)部,0],

[市場部,0],

[業(yè)務(wù)部小柳,業(yè)務(wù)部],

[業(yè)務(wù)部小楊,業(yè)務(wù)部],

[業(yè)務(wù)部小菜,業(yè)務(wù)部],

[技術(shù)部老柳,技術(shù)部],

[技術(shù)部老楊,技術(shù)部],

[技術(shù)部老菜,技術(shù)部],

[市場部柳先生,市場部],

[市場部楊先生,市場部],

[市場部菜鳥,市場部]

]

//省市二維數(shù)組數(shù)據(jù)源

city2 = [

[categoryname,parentcategoryname],

[山西省,0],

[河北省,0],

[太原市,山西省],

[運(yùn)城市,山西省],

[石家莊,河北省],

[廊房,河北省]

]

//省市三維數(shù)組數(shù)據(jù)源

city3 = [

[categoryname,parentid,id],

[北京,0,010],

[山西,0,0359],

[朝陽區(qū),010,001],

[海淀區(qū),010,002],

[豆各莊,001,101],

[十里堡,001,102],

[中關(guān)村,002,201],

[上地,002,202],

[運(yùn)城地區(qū),0359,301],

[太原市,0359,302],

[永濟(jì)市,301,311],

[小區(qū),302,312]

];

</script>

</head>

<body>

<select id=office1  onchange=changeselect(this.value,'office2','',office,'==人員==') style=width:100px></select>

<select id=office2 onchange= style=width:100px></select>

<script language=javascript type=text/javascript>changeselect('0','office1','',office,'==部門==') </script>

<br />

<select id=city001  onchange=changeselect(this.value,'city002','',city2) style=width:100px></select>

<select id=city002 onchange= style=width:100px></select>

<script language=javascript type=text/javascript>changeselect('0','city001','',city2) </script>

<br />

<select id=city3001  onchange=changeselect(this.value,'city3002','',city3) style=width:100px></select>

<select id=city3002  onchange=changeselect(this.value,'city3003','',city3) style=width:100px></select>

<select id=city3003 onchange= style=width:100px></select>

<script language=javascript type=text/javascript>changeselect('0','city3001','0359',city3) </script>

<br />

</body>

</html>

更多信息請(qǐng)查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:js控制option的隱多級(jí)聯(lián)動(dòng)
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)