JavaScriptで簡単な二級連動メニューを書いてください.

二段階連動メニューとは、次のプルダウンメニューのプルダウンリストが前のプルダウンメニューのプルダウンリストで選択された内容の変化によって変化することを意味し、これは多くのところに適用されます.例えば、フォームを記入するときの省と都市です.今は簡単に実現します.
1.JavaScriptで構想を実現する:前のプルダウンメニューにオンチャンゲイイベントを結びつける.イベントが発生した時、州の配列で現在のvalを探して、valのインデックス値に基づいて、次のプルダウンメニューにレンダリングするプルダウンメニューリストを決定する.次のプルダウンメニューリストのサブ要素を削除した後、n個のselect配列を動的に生成し、対応するvalue値とinnersText値を設定します.
2.コードの実現:

<script>
            //        ，              ，                 。
            var province = ["  ","  ","  "];
            var city = [["   ","   ","   ","   "],
                        ["   ","   ","   ","   "],
                        ["   ","   ","   ","   "],
                       ];
            var oPro = document.getElementById('province');
            var oCity = document.getElementById('city');
            var oCitys = oCity.getElementsByTagName('option');
            //      
            oPro.onchange = function(){
                //                 
                var oVal = this.value;
                var index = province.indexOf(oVal);
                var newArr = city[index];
                //           
                while(oCity.firstChild){
                        oCity.removeChild(oCity.firstChild);
                    }
                //                
                for(var i = 0;ivar opt = document.createElement('option');
                    opt.setAttribute('value',newArr[i]);
                    opt.innerText = newArr[i];
                    oCity.appendChild(opt);
                }
            }
        script>

3.DOM方法でよく使われるDOMノードの操作方法:createelement()、apendChild()、RemoveChild()、set Attribute()、innerate、first Childなどの参考:http://harttle.com/2015/10/01/javascript-dom-api.html