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