html5中js添加下拉菜单

<select id="first" οnchange="change()"></select><br/>
<ul id="caidan"></ul>

<script>
    var first = document.getElementById('first');
    var caidan = document.getElementById("caidan");

    function init() {
        var arr_first = ['请选择您要吃哪种','凉菜', '热菜', '招牌菜','主食','酒水'];
       // arr_first.push('北京');
        var ops = '';
        for (var i = 0; i < arr_first.length; i++) {
            ops = ops + '<option>' + arr_first[i] + '</option>';
        }
        first.innerHTML = ops;

    }init();

    var caidan_arr = [
        ['果仁花生', '拍黄瓜', '肉丝拉皮', '海带丝'],
        ['宫保鸡丁', '清蒸鲈鱼', '油炸小黄鱼'],
        ['金银馒头', '黄金米饭'],
        ['水饺','刀削面'],
        ['十年果粒橙' ,'百年啤酒','千年白酒','万年泔水']
    ]


    function _clear( _select ) {
        /*if(_select.length>0) {
         /!*for(var i=_select.length-1 ; i>=0 ; --i) {
         _select.options.remove(i);
         }*!/
         while(_select.length>0) {
         _select.options.remove(0);
         }
         }*/
        _select.innerHTML = '';
    }

    function addli( txt ) {
        var _li = document.createElement('li');
        _li.textContent = txt;
        caidan.appendChild(_li);
    }

    function change() {
       // alert(first.textContent);
        _clear(caidan);
        var index = first.selectedIndex;
        if(index ==0) {
            return;
        }
        else {
            for (var i = 0; i < caidan_arr[index - 1].length; i++) {
                addli(caidan_arr[index - 1][i]);
            }
        }
    }
</script>