<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>
html5中js添加下拉菜单
最新推荐文章于 2021-06-08 11:00:12 发布