<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 级联菜单 </title> <style type="text/css"> select { font-size: 11pt; width:150px; } </style> <script type="text/javascript"> // 构造2个数组 var detail_show = []; var detail_value = []; detail_show[0] = []; detail_value[0] = []; detail_show[0][0] = '上海'; detail_value[0][0] = '0101'; detail_show[0][1] = '北京'; detail_value[0][1] = '0102'; detail_show[0][2] = '广州'; detail_value[0][2] = '0103'; detail_show[1] = []; detail_value[1] = []; detail_show[1][0] = '纽约'; detail_value[1][0] = '0201'; detail_show[1][1] = '华盛顿'; detail_value[1][1] = '0202'; detail_show[1][2] = '加州'; detail_value[1][2] = '0203'; detail_show[2] = []; detail_value[2] = []; detail_show[2][0] = '伦敦'; detail_value[2][0] = '0301'; detail_show[2][1] = '利物浦'; detail_value[2][1] = '0302'; detail_show[2][2] = '伯明翰'; detail_value[2][2] = '0303'; function change(target){ // 获取级联的下拉列表 var deselect = document.getElementById("deselect"); // 清空第二个下拉列表的选项 deselect.innerHTML = null; var m = target.selectedIndex; if ( m >= 0 ) { for(i = 0; i < detail_show[m].length; i++){ // 循环构造很多option,然后放在指定的option中 // new Option(show,value)可以构造一个一个的option deselect.options[i] = new Option(detail_show[m][i], detail_value[m][i]); } // 设置默认选中第一个列表项 deselect.options[0].selected = true; } } </script> </head> <body> <div align="center"> <h2>级联菜单</h2> <form id="crazyitform"> <select name="caselect" id="caselect" onchange="change(this)";> <option value="01">中国</option> <option value="02">美国</option> <option value="03">英国</option> </select> <select name="deselect" id="deselect"> </select> </form> </div> </body> </html> <!-- 当数据量大的时候，就被撑爆了，所以这种级联，最好使用AJAX，也就是下一级变动是从数据库中查询得到的，而不是一开始就已经在页面中的 -->