利用option对象创建简单的JS联动菜单_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

利用option对象创建简单的JS联动菜单

来源：未知作者：类型：图文教程点击次数：发布时间：2014-12-19 13:15:18

利用option对象创建简单的JS联动菜单，没有用到数据库，仅仅把地址保存在数组中，您可以根据需要扩展数组，如果数组过大，可以单独存放在其他js文件中。当然，使用ajax和数据库配合做出来的联动菜单，才是最理想的联动菜单(运行下面代码，会有点问题，建议可以放到本地文件再运行)。

<!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=utf-8" /> <title>利用option对象创建简单的JS联动菜单 - 我爱模板网</title> </head> <body> <script> window.onload = function(){ //定义一个数组保存省份 var proArr = ["--请选择--","安徽省","江苏省","浙江省","广东省"] //定义一个数组保存省份对应的城市 var cityArr = [ ["--请选择--"], ["合肥市","芜湖市","蚌埠市","六安市","马鞍山市","安庆市","黄山市"], ["南京市","无锡市","徐州市","常州市","苏州市","连云港市","盐城","扬州市"], ["杭州市","宁波市","温州市","绍兴市"], ["广州市","佛山市","珠海市","东莞市","惠州市"] ] //显示省份 var pro = document.getElementById("provinces"); var showPro = function(){ for(var i in proArr){ //用 Option对象实例化一个op var op = new Option(proArr[i],proArr[i]); //给省份的select添加实例化的op pro.options.add(op); } } showPro(); //根据省份显示对应的城市 //先给城市加个请选择,不然太难看 var citys = document.getElementById("citys"); citys.innerHTML = "<option>--请选择--</option>"; pro.onchange = function(){ citys.options.length = 0; var s = this.selectedIndex; for(var j in cityArr){ var op = new Option(cityArr[s][j]); citys.options.add(op); } } } </script> <select id="provinces"></select> <select id="citys"></select> </body> </html>
提示：您可以先修改部分代码再运行