Javascript二級(jí)聯(lián)動(dòng)菜單是一種常用的交互式UI設(shè)計(jì)，可以為用戶(hù)提供更加方便的數(shù)據(jù)選擇和操作方式。該菜單通過(guò)將一個(gè)下拉菜單的選項(xiàng)與另一個(gè)下拉菜單的選項(xiàng)相聯(lián)動(dòng)，使得用戶(hù)可以快速選擇和篩選數(shù)據(jù)。下面我們就來(lái)介紹一下如何使用Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單。
首先，我們需要一個(gè)HTML頁(yè)面來(lái)盛放我們的菜單。可以使用以下代碼來(lái)創(chuàng)建一個(gè)含有兩個(gè)下拉菜單的頁(yè)面：
<html> <head> <title>Javascript二級(jí)聯(lián)動(dòng)菜單</title> </head> <body> <select id="select1" onchange="select2Refresh()" > <option value="">請(qǐng)選擇一級(jí)菜單</option> <option value="food">美食</option> <option value="movie">電影</option> </select> <select id="select2"> <option value="">請(qǐng)選擇二級(jí)菜單</option> </select> </body> </html>
以上代碼創(chuàng)建了兩個(gè)下拉菜單，分別命名為select1和select2。第一個(gè)下拉菜單中放置一些一級(jí)菜單，比如food和movie。第二個(gè)下拉菜單不放置任何內(nèi)容，稍后我們使用Javascript動(dòng)態(tài)添加選項(xiàng)。
接下來(lái)，我們需要編寫(xiě)Javascript腳本，通過(guò)監(jiān)聽(tīng)第一個(gè)下拉菜單的選項(xiàng)變化，添加并更新第二個(gè)下拉菜單的選項(xiàng)。可以使用以下代碼來(lái)實(shí)現(xiàn)：
function select2Refresh() {
var data1 = document.getElementById("select1").value; // 獲取第一個(gè)下拉菜單的當(dāng)前選項(xiàng)
var select2 = document.getElementById("select2");
select2.options.length = 0; // 每次選項(xiàng)變化前先清除之前的選項(xiàng)
if (data1 == "") { // 如果一級(jí)菜單未選擇，則不顯示對(duì)應(yīng)二級(jí)菜單
select2.options.add(new Option("請(qǐng)選擇二級(jí)菜單", ""));
}
else if (data1 == "food") { // 如果選擇的一級(jí)菜單為美食，則添加以下二級(jí)菜單選項(xiàng)
select2.options.add(new Option("烤肉", "kaorou"));
select2.options.add(new Option("火鍋", "huoguo"));
select2.options.add(new Option("麻辣燙", "malatang"));
}
else if (data1 == "movie") { // 如果選擇的一級(jí)菜單為電影，則添加以下二級(jí)菜單選項(xiàng)
select2.options.add(new Option("愛(ài)情片", "romance"));
select2.options.add(new Option("動(dòng)作片", "action"));
select2.options.add(new Option("科幻片", "scifi"));
}
}以上代碼使用了Javascript的DOM API，獲取select1和select2的元素并更新選項(xiàng)。當(dāng)select1選中項(xiàng)發(fā)生變化時(shí)，會(huì)觸發(fā)select2Refresh函數(shù)，該函數(shù)首先獲取當(dāng)前選中的一級(jí)菜單，然后根據(jù)不同的一級(jí)菜單選擇不同的二級(jí)菜單選項(xiàng)并添加到select2中。
最后，我們需要將Javascript腳本添加到HTML頁(yè)面中。可以使用以下代碼將上述Javascript代碼添加到head標(biāo)簽中：
<html>
<head>
<title>Javascript二級(jí)聯(lián)動(dòng)菜單</title>
<script>
function select2Refresh() {
// 以上為前面代碼示例中的Javascript腳本
}
</script>
</head>
<body>
<select id="select1" onchange="select2Refresh()" >
<option value="">請(qǐng)選擇一級(jí)菜單</option>
<option value="food">美食</option>
<option value="movie">電影</option>
</select>
<select id="select2">
<option value="">請(qǐng)選擇二級(jí)菜單</option>
</select>
</body>
</html>以上代碼將select2Refresh函數(shù)添加到了head標(biāo)簽中，同時(shí)將引用的Javascript代碼包含在script標(biāo)簽之間。這樣，我們就完成了一個(gè)簡(jiǎn)單的Javascript二級(jí)聯(lián)動(dòng)菜單。
總結(jié)來(lái)說(shuō)，Javascript二級(jí)聯(lián)動(dòng)菜單是一種非常常用的交互式UI設(shè)計(jì)方法，可以為用戶(hù)提供更加方便的數(shù)據(jù)選擇和操作方式。通過(guò)以上的實(shí)例，我們可以了解其基本功能和使用方式，深入學(xué)習(xí)Javascript編程可以進(jìn)一步擴(kuò)展這種菜單的功能和設(shè)計(jì)。