javascript實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉菜單的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉菜單的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[3] = "列二";
arrItemsGrp1[3] = 1;
arrItems1[4] = "列二三";
arrItemsGrp1[4] = 1;
arrItems1[5] = "列二四";
arrItemsGrp1[5] = 1;
arrItems1[6] = "列三";
arrItemsGrp1[6] = 2;
arrItems1[7] = "列三一";
arrItemsGrp1[7] = 2;
arrItems1[0] = "列四";
arrItemsGrp1[0] = 3;
arrItems1[1] = "列四一";
arrItemsGrp1[1] = 3;
arrItems1[2] = "列四二";
arrItemsGrp1[2] = 3;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[21] = "列4-0";
arrItemsGrp2[21] = 0
arrItems2[22] = "列4-1";
arrItemsGrp2[22] = 0
arrItems2[31] = "列41-0";
arrItemsGrp2[31] = 1
arrItems2[34] = "列41-1";
arrItemsGrp2[34] = 1
arrItems2[35] = "列42-0";
arrItemsGrp2[35] = 2
arrItems2[99] = "列24-2";
arrItemsGrp2[99] = 5
arrItems2[100] = "列24-1";
arrItemsGrp2[100] = 5
arrItems2[57] = "列24-0";
arrItemsGrp2[57] = 5
arrItems2[101] = "列2-0";
arrItemsGrp2[101] = 3
arrItems2[102] = "列2-1";
arrItemsGrp2[102] = 3
arrItems2[103] = "列23-0";
arrItemsGrp2[103] = 4
arrItems2[104] = "列23-1";
arrItemsGrp2[104] = 4
arrItems2[105] = "列3-0";
arrItemsGrp2[105] = 6
arrItems2[106] = "列3-1";
arrItemsGrp2[106] = 6
arrItems2[200] = "列31-0";
arrItemsGrp2[200] = 7
arrItems2[201] = "列31-1";
arrItemsGrp2[201] = 7
arrItems2[203] = "列31-2";
arrItemsGrp2[203] = 7
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement_x("option") ;
myEle.value = 0 ;
myEle.text = "[列表]" ;
controlToPopulate.add(myEle) ;
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement_x("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value="0">列表一</option>
<option value="1">列表二</option>
<option value="2">列表三</option>
<option value="3">列表四</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- ASP+JS三級(jí)聯(lián)動(dòng)下拉菜單[調(diào)用數(shù)據(jù)庫數(shù)據(jù)]
- 全國省市二級(jí)聯(lián)動(dòng)下拉菜單 js版
- js實(shí)現(xiàn)select二級(jí)聯(lián)動(dòng)下拉菜單
- jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
- javascript支持區(qū)號(hào)輸入的省市二級(jí)聯(lián)動(dòng)下拉菜單
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡(jiǎn)單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- js實(shí)現(xiàn)的全國省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- jsp從數(shù)據(jù)庫獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- 琥珀無限級(jí)聯(lián)動(dòng)菜單-JavaScript版
- JS實(shí)現(xiàn)經(jīng)典的中國地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單功能實(shí)例【測(cè)試可用】
相關(guān)文章
js中文逗號(hào)轉(zhuǎn)英文實(shí)現(xiàn)
中文逗號(hào)如何轉(zhuǎn)英文,下面為大家詳細(xì)介紹下,感興趣的朋友不要錯(cuò)過2014-02-02基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)
下面小編就為大家分享一篇基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法
本文是對(duì)getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法。進(jìn)行了分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11javaScript代碼飄紅報(bào)錯(cuò)看不懂?讀完這篇文章再試試
這篇文章主要介紹了javaScript代碼飄紅報(bào)錯(cuò)看不懂?讀完這篇文章再試試,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS彈出對(duì)話框?qū)崿F(xiàn)方法(三種方式)
這篇文章主要介紹了JS彈出對(duì)話框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了三種方式,包括alert、confirm及prompt,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12JS中數(shù)據(jù)類型的正確判斷方法實(shí)例
怎么去判斷一個(gè)數(shù)據(jù)屬于哪個(gè)數(shù)據(jù)類型,這個(gè)是很常見的操作,我們一般都會(huì)想到typeof和instanceof這兩個(gè)常見的方法,但有時(shí)候這兩種方法并不能滿足我們的需求,下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)據(jù)類型的正確判斷方法,需要的朋友可以參考下2021-08-08JS jQuery使用正則表達(dá)式去空字符的簡(jiǎn)單實(shí)現(xiàn)代碼
本文給大家分享使用正則表達(dá)式去空字符的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友參考下2017-05-05