双重for循环实现二级联动

<select onchange="change()" id="peoivce" >
            <option>====请选择城市======</option>
            <option>河南</option>
            <option>河北</option>
            <option>湖南</option>
            <option>湖北</option>
        </select>
        
        <select id="city">
            <option>====请选择省份======</option>
            
        </select>
    <script type="text/html" >
            
            
                var datas=[['郑州','驻马店','南阳','洛阳'],['石家庄','邢台','保定','廊坊'],['长沙','张家界','株洲','衡阳'],['武汉','黄冈','襄阳','荆州']];
                
                
            $("peoivce").onchange=function(){
                    var index=$("peoivce").selectedIndex;
                    var newOption; 
                    
                    for(var i=0;i<=datas.length;i++){
                        
                        if(index==i){
                        $("city").innerHTML=datas[i-1];
                                for(var j=0;j<datas[i-1].length;j++){
                                
                             newOption =new Option(datas[i-1][j],datas[i-1][j]);
                                
                                $("city").add(newOption);
                            
                            }
                                
                        }
                        
                    }
            
                    
                }
    
            
            
            function $(id){
                return typeof id==="string"?document.getElementById(id):null;
            }
            
    </script>