angular 点菜_JavaScript实现的select点菜功能示例

本文实例讲述了JavaScript实现的select点菜功能。分享给大家供大家参考，具体如下：

点菜

select{ width:120px;

}

鸡蛋汤

海带汤

万峦猪脚

炸猪排

上海醉蟹

红烧狮子头

排骨炖白菜

//初始化 select 的 size 属性

var selectElement = document.getElementById("select1");

var select2Element = document.getElementById("select2");

var optionElements = selectElement.getElementsByTagName("option");

selectElement.size = optionElements.length;

select2Element.size = optionElements.length;

//获取添加按钮，并添加 click 事件

var btnAddElement = document.getElementById("btnAdd");

btnAddElement.onclick = function () {

var selectElement = document.getElementById("select1");

if (selectElement.selectedIndex < 0) {

alert("请选择菜单！");

return;

}

var select2Element = document.getElementById("select2");

var optionElements = selectElement.getElementsByTagName("option");

select2Element.appendChild(selectElement.options[selectElement.selectedIndex]);

selectElement.removeChild(selectElement.options[selectElement.selectedIndex]);

}

//获取删除按钮，并添加 click 事件

var btnClearElement = document.getElementById("btnClear");

btnClearElement.onclick = function () {

var selectElement = document.getElementById("select2");

if (selectElement.selectedIndex < 0) {

alert("无可选菜单！");

return;

}

var select2Element = document.getElementById("select1");

var optionElements = selectElement.getElementsByTagName("option");

select2Element.appendChild(selectElement.options[selectElement.selectedIndex]);

selectElement.removeChild(selectElement.options[selectElement.selectedIndex]);

}

//btnOk

var btnClearElement = document.getElementById("btnOk");

btnOk.onclick = function () {

var selectedElement = document.getElementById("select2");

var selectedElementLen = selectedElement.childNodes.length - 1;

if (selectedElement.childNodes.length - 1 <= 0) {

//

}

else {

var caidan = "";

for (var i = 0; i < selectedElementLen; i++) {

caidan = caidan + " " + selectedElement.options[i].text;

}

document.write("您选择的有:" + caidan);

}

}

运行效果图如下：

希望本文所述对大家JavaScript程序设计有所帮助。