<head>
<title>专区 </title>
<script language="javascript" type="text/javascript">
//课程选择变换
function aClass(aData, aValue, aText) {
if (aClass.arguments.length < 3)
alert("传入的参数错误!")
else {
this.Data = aData;
this.Value = aValue;
this.Text = aText;
}
}
function chgDnCombobox(aSrc, aDes, aClass, aRemain){
if (chgDnCombobox.arguments.length < 3)
alert("传入的参数错误!")
else if (aSrc.type != "select-one")
alert("传入的参数错误!")
else if (aClass == null)
alert("aClass未定义错误!")
else {
if (aRemain==null)
aRemain = 1;
chgDnComboboxItem(aSrc.options[aSrc.selectedIndex].value, aDes, aClass, aRemain);
}
}
function chgDnComboboxItem(aValue, aDes, aClass, aRemain){
if (chgDnComboboxItem.arguments.length<3)
alert("参数传入错误!")
else if (aClass==null)
alert("错误!aClass没有定义!")
else{
if (aRemain==null)
aRemain = 1;
deleteAllComboboxItem(aDes, aRemain);
for (var i=0; i<aClass.length; i++)
if (aClass[i].Data==aValue) /* check aClass[i].Data */
if (aClass[i].Data!="")
addComboboxItem(aDes, aClass[i].Text, aClass[i].Value);
}
}
function deleteAllComboboxItem(aList, aRemain) {
for (var i=aList.options.length; i > aRemain-1; i--)
aList.options[i] = null;
}
function addComboboxItem(aList, aText, aValue) {
var aOption = new Option(aText, aValue);
eval("aList.options[aList.options.length]=aOption");
}
</script>
</head>
<tr>
<td class="tableLink">上课地点:</td>
<td>
<div>
<select name="city" size=1 style="width:80px;" οnchange='change_area(document.myform)'>
<option value="北京">北京</option>
<option value="成都">成都</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="tableLink">课程选择:</td>
<td>
<div>
<select name="lesson" size=1>
<option value="北京">5月5日 第一期 已报满</option>
<option value="北京">5月6日 第二期 已报满</option>
<option value="北京">5月26日 第七期</option>
<option value="北京">5月27日 第八期</option>
</select>
</div>
</td>
</tr>
<script language="javascript" type="text/javascript">
function onchg(aForm)
{onchg(document.myform);}
var f_Set0 = new Array(
new aClass('北京', '5月5日 第一期 已报满', '5月5日 第一期 已报满'),
new aClass('北京', '5月26日 第七期', '5月26日 第七期'),
new aClass('成都', '5月5日 第一期', '5月5日 第一期'),
new aClass('成都', '5月6日 第二期', '5月6日 第二期'),
new aClass("End", "End", "End")
);
function change_area(aForm) {
chgDnCombobox(aForm.city, aForm.lesson, f_Set0 , 0)
}
</script>
<form name="myform" method="post" action="">
</form>
这个是我在网上找到的一个非常适合我的应用,就是二级级联,挺方便的。
1. 级联菜单一定放到同一个form中,并且,不允许包含runat="server"
2. 由于tr中不允许select标签,因此,可以通过嵌入<div>标签来解决,
3. select中的字体颜色是否可以用css来改变,希望有人能指点。
下面是另外的一个方法,也挺好的,可是在我的程序中,没有成功,问题在哪里,也不清楚,单独用是没有问题的,以后在研究。
<head>
<title>无标题页</title>
<script language="JavaScript" type="text/javascript">
var sel2=[
["5月5日 第一期 已报满","5月6日 第二期 已报满","5月12日 第三期 已报满","5月13日 第四期 已报满","5月19日 第五期 已报满","5月20日 第六期 已报满","5月26日 第七期","5月27日 第八期"],
["5月5日 第一期","5月6日 第二期","5月12日 第三期","5月13日 第四期","5月19日 第五期","5月20日 第六期","5月26日 第七期","5月27日 第八期"]
];
function getSel2(){
var slt1=document.form.select1;//数组获得一级下拉框对象
var slt2=document.form.select2;//数组获得二级下拉框对象
var slt12=sel2[slt1.selectedIndex-1];//得到对应select1的select2的内容
slt2.length=1;//清空select下拉框
//**将城市数组中的值填充到城市下拉框中**/
for(var i=0;
i<slt12.length;i++){slt2[i+1]=new Option(slt12[i]);
}
}
</script>
</head>
<body>
<form name="form" id="form1">
<p> </p>
<p>
<select name="select1" id="select1" onChange="getSel2()">
<OPTION VALUE="0">请选择 </OPTION>
<OPTION VALUE="">北 京 </OPTION>
<OPTION VALUE="">成 都</OPTION>
</select>
<select name="select2" id="select2" οnchange="">
<OPTION VALUE="0">请选择</OPTION>
</select>
</p>
</form>
</body>