二级联动菜单
给每个市一个id,然后用onchange事件当一级联动改变时触发,然后拿到当前的id,去二级联动的Json里面找对应的value对应的列表,添加进去就行了,三级联动的原理也是这个
<!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> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript"> //定义的一个数组 var city=[ ["北京","天津","上海","重庆"], ["南京","苏州","南通","常州"], ["福州","福安","龙岩","南平"], ["广州","潮阳","潮州","澄海"], ["兰州","白银","定西","敦煌"] ]; function getCity(){ //下拉框值改变的时候就执行getCity方法 var sltProvince=document.getElementById("province"); //获取id为“province”的元素 var sltCity=document.getElementById("city"); //获取id为“city”的元素 //sltProvince.selectedIndex-1表示获取当前province这个下拉框选中项的索引 //city[sltProvince.selectedIndex-1]表示city数组中的第几个元素 var provinceCity=city[sltProvince.selectedIndex-1]; sltCity.length=1; //通过遍历循环来给city这个下拉框设置选项 for(var i=0;i<provinceCity.length;i++){ sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]); } } </script> </head> <body> <form action="somepage.asp" name="theForm"> <select name="province" id="province" onchange="getCity()"> <option value="0">请选择所在省份</option> <option value="直辖市">直辖市</option> <option value="江苏省">江苏省</option> <option value="福建省">福建省</option> <option value="广东省">广东省</option> <option value="甘肃省">甘肃省</option> </select> <select id="city" name="city"> <option value="0">请选择所在城市</option> </select> </form> </body> </html>