html5中js添加下拉菜单

<select id="first" onchange="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>