软件学堂

网游分类软件分类

JS代码实现三级联动菜单(1)

2012-11-02 来源:网络

【实例名称】

菜单三级联动菜单(1)

【实例描述】

三级联动菜单是常用的一种选择方式,通过这种方式,用户可以更方便地选择数据,同时还能降低选择的失误率。本例学习如何制作三级联动菜单,实现方法是普通事件的捕获。

【实例代码】

 

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <STYLE> body { font-size: 11px; font-family: Verdana;background:#ececec;color:#666666;} select { font-size: 11px; font-family: Verdana; vertical-align: middle;margin: 3px;background:#ececec;color:#666666;} </STYLE> <div id="myDiv">&nbsp;</div> <SCRIPT LANGUAGE="JavaScript" DEFER> var cMenu = ["上海","北京","深圳","济南"] var cValue = ["shanghai","beijing","shenzhen","jinan"] var aMenu = [["杨浦区","徐汇区","黄浦区","浦东新区"], ["丰台区","海淀区"],["福田","宝安"],["市中","历下"]] var aValue = [["yp","xh","hp","pd"],["ft","hd"],["ft","ba"],["sz","lx"]] var dMenu = [[["市光新村","工农三村"],["徐汇新村","徐汇高楼"], ["黄浦楼宇","外滩风景"],["浦东地铁","浦东机场"]],[["丰台体育馆","造甲村"], ["亚运村"]],[["莲花山","商报大厦"],["深圳宝安机场","宝安开发区"]], [["山庄宾馆","山庄大酒店"],["千佛山东门","千佛山医院"]]]

var oDiv = document.all.myDiv; var ocMenu = document.createElement("<SELECT name='city'>");   //创建城市列表框 var oaMenu = document.createElement("<SELECT name='cityArea'>");  //创建区域列表框 var odMenu = document.createElement("<SELECT name='cityAddress'>");  //创建地址列表框 with(oDiv)appendChild(ocMenu),appendChild(oaMenu),appendChild(odMenu); //将以上三个列表框添加到div中 createMainOptions(); createSubOptions(0); createSub2Options(0,0);

ocMenu.onchange = function() {//绑定城市下拉框的选择事件     createSubOptions(this.selectedIndex); createSub2Options(this.selectedIndex,oaMenu.selectedIndex);}; oaMenu.onchange = function() {//绑定区域下拉框的选择事件     createSub2Options(ocMenu.selectedIndex,this.selectedIndex);};

function createMainOptions() {     for(var i=0;i<cMenu.length;i++)ocMenu.options[i] = new Option(cMenu[i],cValue[i]);//填充城市列表框内容 } function createSubOptions(j) {     with(oaMenu) {         length=0;     //填充区域列表框内容         for(var i=0;i<aMenu[j].length;i++)oaMenu.options[i] = new Option(aMenu[j][i],aValue[j][i]);     } } function createSub2Options(j,k) {     with(odMenu) {         length=0;    //填充地址列表框内容         for(var i=0;i<dMenu[j][k].length;i++) odMenu.options[i] = new Option(dMenu[j][k][i]);     } } ocMenu[1].selected=true; ocMenu.fireEvent("onchange"); </SCRIPT> </head> <body> </body> </html>

【运行效果】

 三级联动菜单运行效果

【难点剖析】

本例中使用数组定义了3个级别下拉框的内容,然后使用“createElement”动态创建了3个下拉框,并使用“appendChild”将下拉框添加到指定的div层中。为了实现联动效果,还动态设置了这3个下拉框的“onchange”事件。

【源码下载】

为了JS代码的准确性,请点击:三级联动菜单 进行本实例源码下载 

上一篇:JS代码实现类似QQ主界面的菜单
下一篇:JS代码实现三级联动菜单(2)

相关文章