在實際應用中，經常將事物進行分類，分類可以是二級的或者多級的。在設計頁面時，可以使用多個下拉菜單分別顯示不同級別的分類信息，即實現多級級聯菜單。以下實例，當選擇商品的“第一級分類”下拉菜單時，商品的“第二級分類”下拉菜單的內容會隨即發生變化。
實現多級級聯菜單的關鍵代碼如下：
<script type="text/javascript">
var arr2 = new Array(4);
arr2["數碼設備"] = new Array("數碼相機","打印機");
arr2["家用電器"] = new Array("電視機","電冰箱");
arr2["禮品工藝"] = new Array("鮮花","彩帶");
function removeinfo(classMenu){//將下拉框各選項清空
for (var i=0; i < classMenu.options.length; i++){
classMenu.options[i]=null;
}
}
function changeMenu(classList,classMenu){
removeinfo(classMenu)
for (var i=0; i < classList.length; i++){
classMenu[i]=new Option(classList[i],classList[i]);
}
}
</script>
<select name="類別" id="類別" onChange="changeMenu(arr2[document.form1.類別.options[document.form1.類別.selectedIndex].text],document.form1.分類);">
<option selected>數碼設備</option>
<option>家用電器</option>
<option>禮品工藝</option>
</select>
<select name="分類" id="分類">
<option>數碼相機</option>
<option>打印機</option>
</select>
本實例首先在js中定義兩個數組分別用於記錄商品一級分類和二級分類的信息，然后自定義一個javascript函數，該函數的功能是當觸發商品“第一級分類”下拉菜單中的onChange事件時，先清空商品的“第二級分類”下拉菜單中的選項內容，然后再將對應信息裝載到商品的“第二級分類”下拉菜單中。