點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

js中三級聯(lián)動的實現(xiàn)

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:31:12

js中三級聯(lián)動的實現(xiàn)

js中三級聯(lián)動的實現(xiàn):聯(lián)動的實現(xiàn)其實很簡單，但是有些細節(jié)卻很容易出錯。在此分享一下我在學習了二級聯(lián)動后，去實現(xiàn)三級聯(lián)動的基本思路。思路：因為二級聯(lián)動是一級聯(lián)與二級聯(lián)通過onchange事件連接，所以三級聯(lián)動便是二級聯(lián)與三級聯(lián)連接。（可能表述不夠清楚）簡單的來說其過程大

推薦度：

點擊下載本文 文檔為doc格式

導讀js中三級聯(lián)動的實現(xiàn):聯(lián)動的實現(xiàn)其實很簡單，但是有些細節(jié)卻很容易出錯。在此分享一下我在學習了二級聯(lián)動后，去實現(xiàn)三級聯(lián)動的基本思路。思路：因為二級聯(lián)動是一級聯(lián)與二級聯(lián)通過onchange事件連接，所以三級聯(lián)動便是二級聯(lián)與三級聯(lián)連接。（可能表述不夠清楚）簡單的來說其過程大

聯(lián)動的實現(xiàn)其實很簡單，但是有些細節(jié)卻很容易出錯。在此分享一下我在學習了二級聯(lián)動后，去實現(xiàn)三級聯(lián)動的基本思路。
思路：因為二級聯(lián)動是一級聯(lián)與二級聯(lián)通過onchange事件連接，所以三級聯(lián)動便是二級聯(lián)與三級聯(lián)連接。（可能表述不夠清楚）簡單的來說其過程大致是：A事件——觸發(fā)——B事件——觸發(fā)——C事件。
注意事項：特別要注意其中數(shù)組對應(yīng)的下標與選項value值的匹配。option選項中各項選項的value值也可以是數(shù)字，value值用數(shù)字更方便實現(xiàn)。
例題：
各學期對應(yīng)課程
學年：第一學年、第二學年
學期：第一學期、第二學期
課程：
第一學年—>第一學期—>HTML,Java，SqlServer基礎(chǔ),C#
第一學年—>第二學期—>javascript,.Net,SqlServer高級,JSP
第二學年—>第一學期—>Struts,ASP.NET,Ajax
第二學年—>第二學期—>Spring,Hibernate '

代碼：
Java代碼

<!doctype html>

<head>

</head>

<body >

<h5><center>各學期對應(yīng)課程</center></h5>

</select>

學期 <select id='term' onchange='change2(this)'>

</select>

課程 <select id='course' >

</select></center>

</body>

//獲取學期對象

var term = document.getElementById('term');

//獲取課程對象

var course = document.getElementById('course');

//創(chuàng)建change1(obj1)函數(shù)，其中參數(shù)obj1是獲取學年的option選項中的value值

function change1(obj1){

//獲取obj1的值

var o1 = obj1.value;

//創(chuàng)建二維數(shù)組存放學年對應(yīng)的學期

var array1 = new Array();

array1['第一學年']=['第一學期','第二學期'];

array1['第二學年']=['第一學期','第二學期'];

//保留學期下拉列表的第一項

term.options.length=1;

//遍歷數(shù)組

for(var i=0; i<array1[o1].length;i++){

//如果是第一學年，則將第一學期的value值設(shè)為0，第二學期的value值設(shè)為1;

if(o1=='第一學年'){

//new Option(”顯示內(nèi)容”，“值”)

var opt1 = new Option(array1[o1][i],i);

}

//如果是第二學年，則將第一學期的value值設(shè)為2，第二學期的value值設(shè)為3；這樣設(shè)置其value值的目的是好與課程對應(yīng)的數(shù)組行下標一一對應(yīng)。

else{

opt1 = new Option(array1[o1][i],i+2);

}

//動態(tài)添加選項opt1到term中，得到下拉列表項

term.options.add(opt1);

}

//創(chuàng)建change2(obj2)函數(shù)，其中參數(shù)obj2是獲取學期的option選項中的value值

function change2(obj2){

//獲取obj2的值

var o2 = obj2.value;

//創(chuàng)建二維數(shù)組array2存放學期對應(yīng)的課程

var array2 = new Array();

array2[0]=['HTML','Java','SqlServer基礎(chǔ)','C#'];

array2[1]=['javascript','.Net','SqlServer高級','JSP'];

array2[2]=['Struts','ASP.NET','Ajax'];

array2[3]=['Spring','Hibernate'];

//保留學期下拉列表的第一項

course.options.length=1;

//遍歷數(shù)組，將選項opt2到course中，得到下拉列表項

for(var i in array2[o2]){

var opt2 = new Option(array2[o2][i],i);

course.options.add(opt2);

}

</script>

</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js中三級聯(lián)動的實現(xiàn)

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現(xiàn) js 三級聯(lián)動

熱門焦點

js中三級聯(lián)動的實現(xiàn)

js中三級聯(lián)動的實現(xiàn)

js中三級聯(lián)動的實現(xiàn)

最新推薦

猜你喜歡

熱門推薦