联动菜单：javaScript

来源：互联网发布：网站源码制作手机软件编辑：程序博客网时间：2024/06/14 02:56

功能：“子菜单“根据“父菜单”的变化而变化。思路：使用数组存放”子菜单“和”父菜单“的关系：new Array("父菜单的值","子菜单选项","子菜单的值")；

使用javascript方法，根据提交的父菜单的值，在数组中获取子菜单列表，并创建子菜单。

核心代码：

function optionChange(parentSelect,childSelectId,myArray){var childSelect = document.getElementById(childSelectId);childSelect.options.length = 1;for(var i =0;i<myArray.length;i++){if(parentSelect.value == myArray[i][0]){childSelect.add(new Option(myArray[i][1],myArray[i][2]));}}}

参数：

parentSelect：父菜单对象（通常使用this）；

childSelect：菜单ID；

myArray：父子菜单关系数组。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>联动菜单</title><script type="text/javascript">var array1 = new Array();array1[0] = new Array("country","中国","china"); array1[1] = new Array("country","美国","USA"); array1[2] = new Array("country","英国","english"); array1[3] = new Array("country","日本","japan"); array1[4] = new Array("country","俄罗斯","russia"); array1[5] = new Array("country","韩国","korea"); var array2 = new Array();array2[0] = new Array("china","北京市","京");array2[1] = new Array("china","上海市","沪");array2[2] = new Array("china","天津市","津");array2[3] = new Array("china","重庆市","渝");array2[4] = new Array("china","河北省","冀");array2[5] = new Array("china","河南省","豫");array2[6] = new Array("china","山东省","鲁");array2[7] = new Array("china","山西省","晋");array2[8] = new Array("china","湖北省","鄂");array2[9] = new Array("china","湖南省","湘");array2[10] = new Array("china","广东省","粤");array2[11] = new Array("china","广西省","桂");array2[12] = new Array("china","贵州省","黔");array2[13] = new Array("china","四川省","川");array2[14] = new Array("china","云南省","云");array2[15] = new Array("china","甘肃省","陇");array2[16] = new Array("china","青海省","青");array2[17] = new Array("china","陕西省","陕");array2[18] = new Array("china","安徽省","皖");array2[19] = new Array("china","海南省","琼");array2[20] = new Array("china","福建省","闽");array2[21] = new Array("china","江西省","赣");array2[22] = new Array("china","江苏省","苏");array2[23] = new Array("china","浙江省","浙");array2[24] = new Array("china","辽宁省","辽");array2[25] = new Array("china","黑龙江省","黑");array2[26] = new Array("china","吉林省","吉");array2[27] = new Array("china","宁夏回族自治区","宁");array2[28] = new Array("china","内蒙古自治区","蒙");array2[29] = new Array("china","新疆维吾尔族自治区","新");array2[30] = new Array("china","西藏自治区","藏");array2[31] = new Array("china","台湾","台");array2[32] = new Array("china","香港","港");array2[33] = new Array("china","澳门","澳");var array3 = new Array();array3[0]  = new Array("京","北京市","京");array3[1]  = new Array("沪","上海市","沪");array3[2]  = new Array("津","天津市","津");array3[3]  = new Array("渝","重庆市","渝");array3[4]  = new Array("冀","石家庄","冀");array3[5]  = new Array("豫","郑州","豫");array3[6]  = new Array("鲁","济南","鲁");array3[7]  = new Array("晋","太原","晋");array3[8]  = new Array("鄂","武汉","鄂");array3[9]  = new Array("湘","长沙","湘");array3[10] = new Array("粤","广州","粤");array3[11] = new Array("桂","桂林","桂");array3[12] = new Array("黔","贵阳","黔");array3[13] = new Array("川","成都","川");array3[14] = new Array("云","昆明","云");array3[15] = new Array("陇","兰州","陇");array3[16] = new Array("青","西宁","青");array3[17] = new Array("陕","西安","陕");array3[18] = new Array("皖","合肥","皖");array3[19] = new Array("琼","海口","琼");array3[20] = new Array("闽","福州","闽");array3[21] = new Array("赣","南昌","赣");array3[22] = new Array("苏","南京","苏");array3[23] = new Array("浙","杭州","浙");array3[24] = new Array("辽","沈阳","辽");array3[25] = new Array("黑","哈尔滨","黑");array3[26] = new Array("吉","长春","吉");array3[27] = new Array("宁","银川","宁");array3[28] = new Array("蒙","呼和浩特","蒙");array3[29] = new Array("新","乌鲁木齐","新");array3[30] = new Array("藏","拉萨","藏");array3[31] = new Array("台","台北","台");array3[32] = new Array("港","香港","港");array3[33] = new Array("澳","澳门","澳");function optionChange(parentSelect,childSelectId,myArray){var childSelect = document.getElementById(childSelectId);childSelect.options.length = 1;for(var i =0;i<myArray.length;i++){if(parentSelect.value == myArray[i][0]){childSelect.add(new Option(myArray[i][1],myArray[i][2]));}}}</script></head><body><select id="mainSelect" onchange="optionChange(this,'subSelect1',array1)"><option value="0" selected="selected">=请选择=</option><option value="country">国家</option><option value="sport">体育</option><option value="clothe">服装</option></select><select id="subSelect1" onchange="optionChange(this,'subSelect2',array2)"><option value="0">=请选择=</option></select><select id="subSelect2" onchange="optionChange(this,'subSelect3',array3)"><option value="0">=请选择=</option></select><select id="subSelect3"><option value="0">=请选择=</option></select></body></html>

0 0