联动下拉框继承select标签，属性基本相同，只是多了一个过滤属性，多个下拉框就是根据这个属性进行联动的。
使用方法：先引入web-html.tld和web-i18n.tld，用web-i18n的js标签引入MultiSelect.js。配置好所需的数据，放到request中。配置好jsp中的multiSelect标签。新建MultiSelect.js的全局js对象，通过这个对象进行多个下拉框联动。
使用标签实例：
<%
Vector options = new Vector()
options.add(new LabelValueBean("Label 0", "Value 0", "Key1"))
options.add(new LabelValueBean("Label 1", "Value 1", "Key1"))
options.add(new LabelValueBean("Label 2", "Value 2", "Key1"))
options.add(new LabelValueBean("Label 3", "Value 3", "Key1"))
options.add(new LabelValueBean("Label 4", "Value 4", "Key1"))
options.add(new LabelValueBean("Label 5", "Value 5", "Key2"))
options.add(new LabelValueBean("Label 6", "Value 6", "Key2"))
options.add(new LabelValueBean("Label 7", "Value 7", "Key2"))
options.add(new LabelValueBean("Label 8", "Value 8", "Key2"))
options.add(new LabelValueBean("Label 9", "Value 9", "Key3"))
request.setAttribute("options", options)
%>
s1变化,s2变化
s1:<html:multiSelect name="s1" onchange="ss.fillData('s1','s2')" value="1">
<html:multiOption value="1">1</html:multiOption>
<html:multiOption value="2">2</html:multiOption>
<html:multiOption value="3">3</html:multiOption>
<html:multiOption value="4">4</html:multiOption>
</html:multiSelect>
s2:<html:multiSelect name="s2" value="11">
<html:multiOption filterKey="1" value="11">tex11</html:multiOption>
<html:multiOption filterKey="1" value="12">tex12</html:multiOption>
<html:multiOption filterKey="1" value="13">tex13</html:multiOption>
<html:multiOption filterKey="2" value="21">tex21</html:multiOption>
<html:multiOption filterKey="2" value="22">tex22</html:multiOption>
<html:multiOption filterKey="2" value="23">tex23</html:multiOption>
<html:multiOption filterKey="3" value="31">tex31</html:multiOption>
<html:multiOption filterKey="3" value="32">tex32</html:multiOption>
<html:multiOption filterKey="3" value="33">tex33</html:multiOption>
<html:multiOption filterKey="4" value="41">tex41</html:multiOption>
<html:multiOption filterKey="4" value="42">tex42</html:multiOption>
<html:multiOption filterKey="4" value="43">tex43</html:multiOption>
</html:multiSelect>
<script language="javascript">
var ss=new MultiSelect("ss")
//触发s1的onchange事件
document.all('s1').onchange()
</script>
multiOption标签属性比option多出的属性：
表2-20
属性 默认值 是否标签属性和必须 描述
filterKey N 用于联动的过滤值
multiOptions和multiOptionsCollection标签属性比options和optionsCollection多出的属性：
表2-21
属性 默认值 是否标签属性和必须 描述
filterKey N 用于联动的过滤值。对应集合中的key值
MultiSelect.js的客户端接口函数：
表2-22
函数 描述
fillData(SelName1,SelName2,url) 通过第一个下拉框，给第二个下拉框赋值。SelName1为第一个下拉框的ID SelName2为第二个下拉框的ID，url为异步取数据的url，可以为一个xml文件
哇，这么多分，真爽。我的空间里面我以前贴过一篇三级联动的例子，我现在又给你写了一个两级联动的代码例子，在IE上测试通过，但愿其它浏览器能过，因为我没有安装别的软件，我害怕你让我一定要在别的环境调试。
下面的代码是HTML部分，数据库内容提取部分我相信你没有问题，你的ASP水平肯定比我好，稍微测试几下就能过的。
我写的例子代码如下：
<html>
<head>
<title>两级联动表单</title>
<script language="javascript">
//下面一行（仅仅一行）的内容由数据库输出
var strs='计算机系 应用与维护专业 软件工程专业|外语系 商务英语专业 其它外语专业'
//上面这一行从数据库里面提取，使用ASP应该非常简单，比如：
//response.write "var str='"
//last_dep=""
//do while not rs.eof
//if rs("Dept")<>last_dep and last_dep<>"" then response.write "|"&rs("Dept")
//response.write " "&rs("MajorName")
//last_dep=rs("Dept")
//loop
var opts=new Array()
//下面的代码利用数据库取出的strs变量，生成数组opts
var i,j,Dept,MajorName
Dept=strs.split('|')
for (i=0i<Dept.lengthi++){
opts[i]=new Array()
MajorName=Dept[i].split(/\s+/)
for (j=0j<MajorName.lengthj++){opts[i][j]=MajorName[j]}
}
//下面的函数初始化联动表单
function setup()
{
var Dept=document.getElementById('id_Dept')
with(Dept){
length = 0
for(i=0i<opts.lengthi++)
options[length]=new Option(opts[i][0],opts[i][0])
}
Dept_Changed()
}
//下面的函数在改变系时改变专业
function Dept_Changed(){
var Dept=document.getElementById('id_Dept').selectedIndex
var MajorName=document.getElementById('id_MajorName')
with(MajorName){
length = 0
for(i=1i<opts[Dept].lengthi++)
options[length]=new Option(opts[Dept][i],opts[Dept][i])
}
}
</script>
</head>
<body>
<form>
<Select id="id_Dept" NAME="Dept" onChange="Dept_Changed()"></Select>
<Select id="id_MajorName" NAME="MajorName"></Select>
</form>
<!--js初始化函数-->
<SCRIPT language="javascript">
setup()
</SCRIPT>
</body>
</html>
有不明白的请你补充。
不过我相信你已经明白了，核心部分就是strs变量的组装，不同系之间用|分隔，一个系里面是系名开头，然后是各专业，中间用空格分隔。
祝你好运。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）