點擊下載
本文文檔

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

js中三級聯動的實現

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

js中三級聯動的實現

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

推薦度：

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

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

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

代碼：
Java代碼

<!doctype html>

<head>

</head>

<body >

<h5><center>各學期對應課程</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');

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

function change1(obj1){

//獲取obj1的值

var o1 = obj1.value;

//創建二維數組存放學年對應的學期

var array1 = new Array();

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

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

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

term.options.length=1;

//遍歷數組

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

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

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

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

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

}

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

else{

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

}

//動態添加選項opt1到term中，得到下拉列表項

term.options.add(opt1);

}

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

function change2(obj2){

//獲取obj2的值

var o2 = obj2.value;

//創建二維數組array2存放學期對應的課程

var array2 = new Array();

array2[0]=['HTML','Java','SqlServer基礎','C#'];

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

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

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

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

course.options.length=1;

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

for(var i in array2[o2]){

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

course.options.add(opt2);

}

</script>

</html>

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

js中三級聯動的實現

推薦度：

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

標簽：實現 js 三級聯動

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

js中三級聯動的實現

js中三級聯動的實現

js中三級聯動的實現

最新推薦

猜你喜歡

熱門推薦