js实现两个下拉联动

Question

js下拉联动

Answer 1

<form name="myform">
    <select name="yuanxiao"></select>
    <select name="zhuanye1"></select>
    <select name="zhuanye2"></select>
</form>
<script type="text/javascript">
    var obj = [
        {name:"北京大学",list:['航空服务管理','航空预科','民航物流管理','民航旅游管理','民航商务信息管理','邮轮海乘服务管理','国际酒店管理','国际飞行员']},
        {name:"尚无意向院校",list:['航空服务管理2','航空预科2','民航物流管理2','民航旅游管理2','民航商务信息管理2','邮轮海乘服务管理2','国际酒店管理2','国际飞行员2']}
    ];
    //思路流程：必须先学校，然后选择第一志愿，再选择第二志愿(确保两个志愿不能一样)
    var list,select = document.getElementsByName("myform")[0].getElementsByTagName("select");//获取指定范围下的所有select
    select[0].options.add(new Option("选择院校",""));
    for(var i = obj.length;i--;){
        select[0].options.add(new Option(obj[i].name,i));
    }
    select[1].onchange = function(){
        select[2].options.length = 0;//改变后清空专业
        select[2].options.add(new Option("第二志愿",""));
        for(i = 0; i < list.length; i++){
            this.value != "0_"+ i && select[2].options.add(new Option(list[i],"0_" + i));
        }
    };
    select[0].onchange = function(){
        for(var l = obj.length + 1; -- l;){
            select[l].options.length = 0;//改变学校后清空专业
            select[l].options.add(new Option("第"+["","一","二"][l]+"志愿",""));
        }
        list = this.value == "" ? [] : obj[this.value].list;
        for(l = 0;l < list.length;l ++){
            select[1].options.add(new Option(list[l],"0_" + l));
        }
    };
    select[0].onchange();
</script>