[新版本]JS三级分类联动选项


<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>[新版本]JS三级分类联动选项</title>
[新版本]JS三级分类联动选项:<hr>


<SCRIPT LANGUAGE='JavaScript'>

function addOption(v,idx){
    var node=document.createElement("option");
    var x=document.createTextNode(v);
    node.appendChild(x);
    node.setAttribute("value",v);  
    document.getElementById(idx).appendChild(node);
}




function createType2(x){//alert(x);
    if(x<0){return;}
    var type2=[
        ['选择蔬菜分类','多叶','根茎']
        ,['选择杂粮分类','谷类','豆类']
        ,['选择水果分类','全部水果']
    ];
    var idx='s2';
    if(optionLength(idx)>0){
        setEmpty(idx);//
    }
    for(var i=0;i<type2[x].length;i++){
        addOption(type2[x][i],idx);
    }
}



function createType3(x){//alert(x);
    if('选择蔬菜分类'==x
    || '选择杂粮分类'==x
    || '选择水果分类'==x){return;}
    var type3={
        '多叶':['白菜','青菜','韭菜叶']
        ,'根茎':['韭菜根','萝卜','土豆']
        ,'谷类':['黑米','红米','糯米']
        ,'豆类':['豌豆','绿豆','红豆']
        ,'全部水果':['葡萄','西瓜','菠萝']
    };
    var idx='s3';
    if(optionLength(idx)>0){
        setEmpty(idx);//
    }
    for(var i=0;i<type3[x].length;i++){
        addOption(type3[x][i],idx);
    }
}


function setEmpty(idx){
    var x=document.getElementById(idx);
    var a=x.getElementsByTagName("option");
    for(var i=a.length-1;i>=0;i--){
        x.removeChild(a[i]);      
    }
}



function optionLength(idx){
    var x=document.getElementById(idx);
    var a=x.getElementsByTagName("option");
    return a.length;      
}




</SCRIPT>

<select id="s1" name="s1" onChange="createType2(this.options[this.options.selectedIndex].value)">
    <option value="-1">请选择主类别</option>
    <option value="0">蔬菜</option>    
    <option value="1">杂粮</option>    
    <option value="2">水果</option>    
</select> 


<select id="s2" name="s2" onChange="createType3(this.options[this.options.selectedIndex].value)"><option value="-1">请选择分类</option>
</select>


<select id="s3" name="s3">
<option value="-1">请选择分类</option>
</select>

程序运行结果如下,点击这里亲自运行看看