实际项目中几个下拉框需要联动是经常需要实现的功能.
一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动.
不妨定义几个js的数据对象来描叙这种几个下拉框数据间的关系.这样数据关系明了,实现也简单.
见以下用javascript实现下拉框联动的实例
<script>
var itemAry1=new Array();
var itemAry2=new Array();
//定义第一个下拉框的数据结构
function Item(name,value)
{
this.name=name;
this.value=value;
}
//定义第二个下拉框的数据结构多了一个指向父项的数据
function SubItem(parent,name,value)
{
this.parent=parent;
this.name=name;
this.value=value;
}
//组织下拉框的数据
itemAry1[0]=new Item(1,'item1');
itemAry1[1]=new Item(2,'item2');
itemAry2[0]=new SubItem(1,"1","subItem1");
itemAry2[1]=new SubItem(1,"2","subItem2");
itemAry2[2]=new SubItem(1,"3","subItem3");
itemAry2[3]=new SubItem(2,"4","subItemA");
itemAry2[4]=new SubItem(2,"5","subItemB");
//初始化第一个下拉框数据
function initOption()
{
for(var i=0;i<itemAry1.length;i++)
{
document.getElementById("selectItem1").add(new Option(itemAry1[i].value,itemAry1[i].name));
}
changeOption(document.getElementById("selectItem1").value);
}
//联动第二个下拉框的数据
function changeOption(selectOpt)
{
document.getElementById("selectItem2").length=0;
for(var j=0;j<itemAry2.length;j++)
{
if(itemAry2[j].parent==selectOpt)
{
document.getElementById("selectItem2").add(new Option(itemAry2[j].value,itemAry2[j].name));
}
}
}
</script>
<html>
<body οnlοad=initOption()>
<select id="selectItem1" name="selectItem1" οnchange=changeOption(this.value)>
</select>
<select id="selectItem2" name="selectItem2"></select>
</body>
</html>