Javascript写的级联选择框-优快云博客

<head>
<title></title>
<script  type="text/javascript">...
    var classification_names = [["一年一班","一年二班"],["二年一班"],["三年一班"],["四年一班"]];
    var classificaiton_ids = [[1,2],[3],[4],[5]];

    function class_onchange() ...{
        //删除前面所有分类
        var classifications = document.getElementById("classifications");
        var count=classifications.options.length;
        var delCount = 0 ;
        while(delCount < count)    ...{            
            classifications.options.remove(i);
            delCount++;
        } 
        //获得所选班级id
        var classid=document.getElementById("class").value;
        //获得id班级所有分类名
        var thisClassifcationNames=classification_names[classid];
        if(!thisClassifcationNames) ...{
            return;
        }
        //获得id班级所有分类id
        var thisClassifcationIds=classificaiton_ids[classid];
        if(!thisClassifcationIds) ...{
            return;
        }
        //设置该班级分类选项
        var nullOption = document.createElement("option");
            nullOption.text="--请选择分类--";
            nullOption.value="";
            classifications.options.add(nullOption);
        classifications.value="";
        for(var i=0;i<thisClassifcationNames.length;i++)...{
            var option = document.createElement("option");
            option.text=thisClassifcationNames[i];
            option.value=thisClassifcationIds[i];
            classifications.options.add(option);
        }        
    }
</script>
</head>
<body>
班级
<select id="class" name="class"  onchange="return class_onchange()" >
    <option value="-1" selected="selected">请选择年级</option>
    <option value="0">一年级</option>
    <option value="1">二年级</option>
    <option value="2">三年级</option>
    <option value="3">四年级</option>
</select>
分类
<select id="classifications" name="classifications">
    <option value="-1" selected="selected">请选择班级</option>
</select>
</body>