使用prototype.js实现多级级联菜单
最近因为业务需要，要完成一个多级的级联菜单，本来在网上找一找，但是没有找到自己满足的。于是自己写了一个。放在blog里以备不时之需，也可以帮助有需要的朋友:)
prototype.js下载地址如下:
http://www.prototypejs.org/
完成代码如下:
<html>
<head>
<title>AJAX联动页面</title>
<script src="script/prototype.js"></script>
</head>
<body>
上网时长:<span id="times"></span>
包月类型:<span id="types"></span>
带宽（网速）:<span id="bandwidth"></span>
消费档次:<span id="price"></span>
<script>
var WideBand = Class.create();
WideBand.prototype = {
initialize:function() {},
times:{
'1':'10小时之内',
'2':'10-30小时',
'3':'30－80小时',
'4':'80－120小时',
'5':'120小时以上',
'6':'不限时'
},
types:{
'1':{
'101':'包月限时'
},
'2':{
'201':'包月限时'
},
'3':{
'301':'包月限时'
},
'4':{
'401':'包月限时'
},
'5':{
'501':'包月限时'
},
'6':{
'601':'包月不限时',
'602':'包年不限时',
'603':'寒、暑假不限时'
}
},
bandwidth:{
'101':{
'10101':'512k',
'10102':'1M',
'10103':'1.5M'
},
'201':{
'20101':'512k',
'20102':'1M',
'20103':'1.5M'
},
'301':{
'30101':'512k',
'30102':'1M',
'30103':'1.5M以上'
},
'401':{
'40101':'1M',
'40102':'1M以上'
},
'501':{
'50101':'1M',
'50102':'1.5M以上'
},
'601':{
'60101':'512K',
'60102':'1M',
'60103':'1.5M以上',
'60104':'2M及以上'
},
'602':{
'60201':'512K',
'60202':'1M',
'60203':'1.5M以上',
'60204':'2M及以上'
},
'603':{
'60301':'512K',
'60302':'1M'
}
},
price:{
'10101':{
'1':'10元以下',
'2':'10－30元',
'3':'30元以上'
},
'10102':{
'1':'10元以下',
'2':'10－30元',
'3':'30元以上'
},
'10103':{
'1':'10元以下',
'2':'10－30元',
'3':'30元以上'
},
'20101':{
'1':'10元以下',
'2':'10－30元',
'3':'30元以上'
},
'20102':{
'1':'10元以下',
'2':'10－30元',
'3':'30元以上'
},
'20103':{
'1':'10－30元',
'2':'30元以上'
},
'30101':{
'1':'30元以下',
'2':'30－50元',
'3':'50－80元',
'4':'80元以上'
},
'30102':{
'1':'30元以下',
'2':'30－50元',
'3':'50－80元',
'4':'80元以上'
},
'30103':{
'1':'30元以下',
'2':'30－50元',
'3':'60－80元',
'4':'80元以上'
},
'40101':{
'1':'40元以下',
'2':'40－60元',
'3':'60－80元',
'4':'80元以上'
},
'40102':{
'1':'40元以下',
'2':'40－60元',
'3':'60－90元',
'4':'90元以上'
},
'50101':{
'1':'80元以下',
'2':'80-110元',
'3':'110元以上'
},
'50102':{
'1':'110元以下',
'2':'110－130元',
'3':'130元以上'
},
'60101':{
'1':'40元以下',
'2':'40-50元',
'3':'50元以上'
},
'60102':{
'1':'70元以下',
'2':'70-90元',
'3':'90-120元',
'4':'120元以上'
},
'60103':{
'1':'90元以下',
'2':'90-120元',
'3':'120-150元',
'4':'150元以上'
},
'60104':{
'1':'120元以下',
'2':'120-160元',
'3':'160-200元'
},
'60201':{
'1':'400元以下',
'2':'400－500元',
'3':'500元以上'
},
'60202':{
'1':'800元以下',
'2':'800－900元',
'3':'900-1100元'
},
'60203':{
'1':'1000元以下',
'2':'1000-1200元',
'3':'1200-1300元'
},
'60204':{
'1':'1300元以下',
'2':'1300-1600元',
'3':'1600元以上'
},
'60301':{
'1':'200－250元',
'2':'250－300元'
},
'60302':{
'1':'250－350元',
'2':'350－400元'
}
}
};
var bw = new WideBand();
//显示times
function showTimes()
{
var result = '<select id="selectTimes" onchange="showTypes()">';
for( time in bw.times )
{
result += '<option value="'+ time +'">'+ bw.times[time] +'</option>';
}
result += '</select>';
$('times').innerHTML = result;
showTypes();
}
//显示type
function showTypes()
{
var time = $('selectTimes').value;
var result = '<select id="selectTypes" onchange="showBandwidth()">';
for( type in bw.types[time] )
{
result += '<option value="'+ type +'">'+ bw.types[time][type] +'</option>';
}
result += '</select>';
$('types').innerHTML = result;
showBandwidth();
}
//显示bandwidth
function showBandwidth()
{
var type = $('selectTypes').value;
var result = '<select id="selectBandwidth" onchange="showPrice()">';
for( bwidth in bw.bandwidth[type] )
{
result += '<option value="'+ bwidth +'">'+ bw.bandwidth[type][bwidth] +'</option>';
}
result += '</select>';
$('bandwidth').innerHTML = result;
showPrice();
}
//显示price
function showPrice()
{
var bandwidth = $('selectBandwidth').value;
var result = '<select id="selectPrice">';
for( p in bw.price[bandwidth] )
{
result += '<option value="'+ p +'">'+ bw.price[bandwidth][p] +'</option>';
}
result += '</select>';
$('price').innerHTML = result;
}
showTimes();
</script>
</body>
</html>
以上代码我就不多做解释了。你只要认真的看一下都能看懂。总之prototype.js是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，而且有很高的学习价值，所以我强烈建议B/S开发人员和对JavaScript开发感兴趣的朋友去浏览一些它的源代码.
浙公网安备 33010602011771号