select选择框三级联动

Posted 2020-11-30 jiunie

<script language="javascript">
var selItm = new Array(4), selItemr = new Array(4),i,j;
for ( i=0; i<4; i++){
    selItm[i] = new Array();
    selItemr[i] = new Array();

}
selItm[0][0] = new Option("请选择", " ");                    //定义基本选项
selItm[1][0] = new Option("小学数学", "小学数学");
selItm[1][1] = new Option("小学语文", "小学语文");
selItm[1][2] = new Option("小学英语", "小学英语");
selItm[2][0] = new Option("中学数学", "中学数学");
selItm[2][1] = new Option("中学物理", "中学物理");
selItm[2][2] = new Option("中学语文", "中学语文");
selItm[2][3] = new Option("中学英语", "中学英语");
selItm[2][4] = new Option("中学政治", "中学政治");
selItm[3][0] = new Option("大学数学", "大学数学");
selItm[3][1] = new Option("大学物理", "大学物理");
selItm[3][2] = new Option("大学语文", "大学语文");
selItm[3][3] = new Option("大学英语", "大学英语");
selItm[3][4] = new Option("大学政治", "大学政治");

for( i=0;i<selItm.length;i++){
    for( j=0;j<selItm[i].length;j++){
        selItemr[i][j] = new Array();
    }
}
//
selItemr[0][0][0]= new Option("请选择", " ");    
selItemr[1][0][0] = new Option("赵一", "赵一");
selItemr[1][0][1] = new Option("赵2", "赵2");
selItemr[1][1][0] = new Option("赵二", "赵二");
selItemr[1][2][0] = new Option("赵三", "赵三");
selItemr[2][0][0] = new Option("王一", "王一");
selItemr[2][1][0] = new Option("王二", "王二");
selItemr[2][2][0] = new Option("王三", "王三");
selItemr[2][3][0] = new Option("王四", "王四");
selItemr[2][4][0] = new Option("王五", "王五");
selItemr[3][0][0] = new Option("李一", "李一");
selItemr[3][1][0] = new Option("李二", "李二");
selItemr[3][2][0] = new Option("李三", "李三");
selItemr[3][3][0] = new Option("李四", "李四");
selItemr[3][4][0] = new Option("李五", "李五");


function OnS1Change(x){
    var temp2 = document.form1.sel12,  temp3 = document.form1.sel13;

    temp2.options.length = 0;
    temp3.options.length = 0;
    for (i=0;i<selItm[x].length;i++){
        temp2.options[i]=new Option(selItm[x][i].text,selItm[x][i].value);    // 实例化对象


    }

    for(i=0;i<selItemr[x][0].length;i++){
        temp3.options[i] = new Option(selItemr[x][0][i].text,selItemr[x][0][i].value); 
    }


    temp2.options[0].selected=true;                            //显示菜单1的初始值
    temp3.options[0].selected = true;



}
function OnS2Change(){
    var temp1= document.form1.sel1,   temp2=document.form1.sel12,   temp3=document.form1.sel13 ;
    var x = temp1.selectedIndex,y=temp2.selectedIndex;


    temp3.options.length = 0;
    for(i=0;i<selItemr[x][y].length;i++){


        temp3.options[i] = new Option(selItemr[x][y][i].text,selItemr[x][y][i].value); 
    }

    temp3.options[0].selected =true;


}
function OnS3Change(str1,str2,str3){

    if(str1>0){
        switch(str1){                                // 判断身分
            case 1:str1="小学生";break;
            case 2:str1="中学生";break;
            case 3:str1="大学生";break;
        }
        alert("您的身分是："+str1+"
您最喜欢的科目是："+str2+ "
您最喜欢的老师是："+str3);            // 输出 信息
    }
    else
        alert("您没有选择身分");
}
</script>

    <form name="form1" method="post" action="">
        <label>您的身分是：<select name="sel1" onChange="OnS1Change(this.value)">
                <option value="0">请选择</option>
                <option value="1">小学生</option>
                <option value="2">中学生</option>
                <option value="3">大学生</option>
            </select>

        </label>
        <label><!--  创建的菜单2-->
            您最喜欢的科目：
            <select name="sel12"  onChange="OnS2Change()"></select>
        </label>
        <label><!--  创建的菜单2-->
            您最喜欢的老师：
            <select name="sel13"  ></select>
        </label>
        <label><!--  收集所选择的信息-->
            <input type="button" name="Submit" value="确定" onClick="OnS3Change(sel1.value,sel12.value,sel13.value)">
        </label>
    </form>