JavaScript select 级联操作

　var s1=    document.getElementById("s1") ;
    var s2=   document.getElementById("s2") ;
    var schoolTerm =["第一学期","第二学期","第三学期","第四学期","第五学期"];
    var content=[
        ["html","css","javascript" ] ,  ["c","c++" ],
        ["mysql","oracle"] ,   ["java" ],
        ["jqury","bootstrap","css3","HTML5"  ]
    ];
    //初始化
   for( var i=0; i<schoolTerm.length ;i++){
       s1.add(new Option( schoolTerm[i],schoolTerm[i])  ,null);
   }
    for( var i=0; i<content[0].length ;i++){
        s2.add(new Option(content[0][i],content[0][i])  ,null);
    }
    /* 选择 */
    s1.onchange = function(){
        var index =   s1.selectedIndex ;
        s2.innerHTML ="";
        for( var i=0; i<content[index].length ;i++){
            s2.add(new Option(content[index][i],content[index][i])  ,null);
        }
    };
           

　　

select元素：

1. 事件： onchange 

2.方法 ： add(新Option对象，null ) /   add( 新Option对象， 被替代Option对象)

注意：var o = new Option("","");  参数：显示的字符串，value属性值。即Option有属性text属性，value属性

3.属性：length

<select name="s1" id="s1">


</select>



<select name="s2" id="s2">


</select>
           

　　

转载于:https://www.cnblogs.com/July-/p/5774369.html