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>

  

posted @ 2016-08-15 21:10  July_Zheng  阅读(2227)  评论(0编辑  收藏  举报