JavaScript实现联动的下拉菜单

无名氏 WEB前端 1,209 次浏览 , , 没有评论
<script type="text/javascript">
//创建对象,数据,值,文本
function obj(aData,aValue,aText){
        this.Data=aData;
        this.Value=aValue;
        this.Text=aText;
}
//设置选项数据数组,可以添加多个参数为"源地址,选择值,选择文本"
var Set_data=new Array(    
        new obj('江西','南昌','南昌'),
        new obj('江西','九江','九江'),
        new obj('福建','福州','福州'),
        new obj('福建','厦门','厦门')
        );
//该函数接受两个参数——两个下拉菜单
function chg(parent,child){
        //以父菜单的选中选项的值,子菜单,和选项数数据组为参数调用chg函数
        chgComitem(parent.options[parent.selectedIndex].value,child,Set_data);
}
function chgComitem(parentValue,child,objs){ //改变子菜单
        //1.以子菜单为参数调用函数
        DelAllComitem(child);
        //2.遍历所有的选项数据
        for(i=0;i<objs .length;i++){
                //如果选项数据的Data与父菜单选中值一样的话
                if (objs[i].Data==parentValue)
                        //3.以子菜单,选项数据的值,选项数据的文本作为参数调用AddComitem
                        AddComitem(child,objs[i].Value,objs[i].Text);          
        }
}
//1.删除子菜单的所有元素
function DelAllComitem(aList){  
        //传入的是select元素,让options全为null
        for(i=aList.options.length-1;i>=0;i--)
        aList.options[i]=null;
}
//3.添加子菜单的元素
function AddComitem(aList,aValue,aText){
        //用传入的文本和值来创建option
        var aOption=new Option(aText,aValue);
        //插入option(注:length属性比最大下标大1)
        aList.options[aList.options.length]=aOption;
}
  </objs></script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go