原生Js级别联动下拉实现

原生javascript实现多级联动导航,没有使用第三方js库.具体方法见下面的代码

JavaScript

<select name="it_id" id="first" onchange="cc()">
    <volist name='vo' id='atype'>
        <option value="{$atype.id}">{$atype.item_name}</option>
    </volist></select><select name="it_id" id="second">
    
    <option value="">请选择左侧</option>
    </select>                                <script>
    
    function cc(){

        var ff = document.getElementById("first");
        var ss=document.getElementById("second");
        ss.innerHTML = "";
        var str = ff.value;
        

        var oAjax = null;
        if(window.XMLHttpRequest){
            oAjax = new XMLHttpRequest();
        }else{
            oAjax = new ActiveXObject('Microsoft.XMLHTTP');
        }

        oAjax.open('GET', 'getChild/id/'+str,true);
        oAjax.send();
        oAjax.onreadystatechange=function(){
            if(oAjax.readyState==4){
                if(oAjax.status==200){
                    var json=oAjax.responseText;
                    var jsonList=eval(json);
                    for(var i=0;i<jsonList.length;i++){
                        
                        ss.options.add(new Option(jsonList[i].item_name,jsonList[i].id))
                    }
                    
                    
                }else{
                    if(fnFaild){                        fnFaild();
                    }
                }
            }
        };

    }</script>