下拉框三级下拉菜单

技术文章

下拉框三级下拉菜单

时间：2008-11-20 点击：986

<html>
<head>
<title>下拉框三级下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>
<body>

<SCRIPT LANGUAGE="JavaScript">
<!--
function CreateSelect(_FormName,_SName,_SValue,_Ds,_AllOptionStr,ShowType)
{
	//三级关链菜单通用版
	//作者:海娃， 有问题请到http://www.51windows.Net留言。
	if (_FormName=="")
		_FormName = "all"
	var _DsArr = _Ds.split("|")
	var _Ds1,_Ds2,_Ds3
	var _Ds1 = _DsArr[0]
	var _Ds2 = (_DsArr.length>1)?_DsArr[1]:_DsArr[0]
	var _Ds3 = (_DsArr.length>2)?_DsArr[2]:_DsArr[0]

var _SNameArr = _SName.split("|")
	var _SName1,_SName2,_SName3
	var _SName1 = _SNameArr[0]
	var _SName2 = (_SNameArr.length>1)?_SNameArr[1]:_SNameArr[0]
	var _SName3 = (_SNameArr.length>2)?_SNameArr[2]:_SNameArr[0]

var _SValueArr = _SValue.split("|")
	var _SValue1,_SValue2,_SValue3
	var _SValue1 = _SValueArr[0]
	var _SValue2 = (_SValueArr.length>1)?_SValueArr[1]:_SValueArr[0]
	var _SValue3 = (_SValueArr.length>2)?_SValueArr[2]:_SValueArr[0]

if (ShowType==3){
		_AllOptionStr = _AllOptionStr.replace(/\(\(/ig,"\(\("+_Ds3+"\^")
		_AllOptionStr = _AllOptionStr.replace(/\{\{/ig,"\{\{"+_Ds2+"\(\("+_Ds3+"\*\*")
	}
	else if(ShowType==2){
		_AllOptionStr = _AllOptionStr.replace(/\{\{/ig,"\{\{"+_Ds2+"\(\("+_Ds3+"\*\*")
	}
	else if(ShowType==1){
		_AllOptionStr = _AllOptionStr.replace(/\(\(/ig,"\(\("+_Ds3+"\^")
	}
	var AllStr = _Ds1 + "{{"+ _Ds2 + "(("+ _Ds3 +"||"+_AllOptionStr
	//alert(AllStr)
	var _AR0 = AllStr.split("||");
	document.writeln("<select name=\"" + _SName1 + "\" size=\"1\" onChange=\""+_SName1+"redirect(this.options.selectedIndex)\">");
	for (var i1 = 0;i1 < _AR0.length;i1++)
	{
		var Area1Str = _AR0[i1];
		var _AR10 = Area1Str.split("{{");
		var _AR11 = _AR10[0].split("@");
		var Tstr1 = _AR11[0];
		var Vstr1 = (_AR11.length==2)?_AR11[1]:_AR11[0]
		document.writeln("<option value=\""+Vstr1+"\">"+Tstr1+"<\/option>");
	}
	document.writeln("<\/select>");

document.writeln("<select name=\"" + _SName2 + "\" size=\"1\" onChange=\""+_SName1+"redirect1(this.options.selectedIndex)\">");
	var _AR111 = _Ds2.split("@");
	var Tstr11 = _AR111[0];
	var Vstr11 = (_AR111.length==2)?_AR111[1]:_AR111[0];
	document.writeln("<option value=\""+Vstr11+"\">"+Tstr11+"<\/option>");
	document.writeln("<\/select>");

document.writeln("<select name=\"" + _SName3 + "\" size=\"1\">");
	var _AR222 = _Ds3.split("@");
	var Tstr22 = _AR222[0];
	var Vstr22 = (_AR222.length==2)?_AR222[1]:_AR222[0];
	document.writeln("<option value=\""+Vstr22+"\">"+Tstr22+"<\/option>");
	document.writeln("<\/select>");

<FORM name="HwForm">
<HR>选择一次<br>
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("","S_13|S_23|S_33","","请选择地区@|请选择省份@|请选择城市@",AllStr1,0);
</SCRIPT>

<HR>选择二次<br><SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_12|S_22|S_32","","请选择分类@|请选择品牌@|请选择系列@",AllStr2,1);
</SCRIPT>
</FORM>

</body>
</html>

可刷新的无限制级联菜单效果

水平向上弹出菜单

二级下拉菜单

滑出式隐藏菜单

绿色下拉透明菜单

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：