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程序设计有所帮助。
angular 点菜_JavaScript实现的select点菜功能示例相关推荐
- js 万年历农历转阳历 方法_JavaScript实现公历转农历功能示例
本文实例讲述了JavaScript实现公历转农历功能.分享给大家供大家参考,具体如下: 完整代码(该源码使用在线工具http://tools.jb51.net/code/js进行了格式化处理,以便于读 ...
- 点菜系统服务器,电子菜谱点菜系统
iPad]电子菜谱b](iPad电子点餐系统)是一款基于苹果iPad平板电脑为载体的电子点餐系统. 软件名称 电子菜谱点菜系统 原 理 硬盘存储基 于 苹果iPad平板 系统特点 成本低 ...
- 无线点菜宝服务器,无线点菜机怎么用 无线点菜机使用方法【详解】
无线点菜器,是一种 现代 高科 技的点菜工具.在我们日常生活的 饭店 和餐馆中,你会发现,当你点餐的时候,服务员已经不用手写菜名了,而是手上拿着一个小机器,然后帮你点餐.这个小机器就是无线点菜机.无限 ...
- 关于Angular中使用HTML的select和option标签的一些问题
如果在Angular中使用HTML的select和option标签时,给两个标签分别绑定数据的时候,虽然可以通过[ngModel]和(ngModelChange)的形式绑定数值及选项变化后触发的事件. ...
- angular 数字逗号分隔_angular 实现的输入框数字千分位及保留几位小数点功能示例...
摘要:这篇AngularJS栏目下的"angular 实现的输入框数字千分位及保留几位小数点功能示例",介绍的技术点是"angular.保留几位小数.千分位.小数点.输入 ...
- PHP三级联动视频教程,PHP教程:thinkPHP实现的省市区三级联动功能示例
<PHP教程:thinkPHP实现的省市区三级联动功能示例>要点: 本文介绍了PHP教程:thinkPHP实现的省市区三级联动功能示例,希望对您有用.如果有疑问,可以联系我们. 本文实例讲 ...
- mysql查询单个员工信息_PHP+MySQL实现模糊查询员工信息功能示例
本文实例讲述了PHP+MySQL实现模糊查询员工信息功能.分享给大家供大家参考,具体如下: 一.代码 注意两点: 1.用Notepad+编辑时,格式选择:[编码字符集]->[中文]->[g ...
- oracle当天八点,oracle实现动态查询前一天早八点到当天早八点的数据功能示例
oracle实现动态查询前一天早八点到当天早八点的数据功能示例 本文实例讲述了oracle实现动态查询前一天早八点到当天早八点的数据.分享给大家供大家参考,具体如下: 需要查询前一天早八点到当天早八点 ...
- python 自动生成word文档,python实现的生成word文档功能示例
python实现的生成word文档功能示例 发布时间:2020-09-23 11:37:44 来源:脚本之家 阅读:108 作者:zhizunyu2009 本文实例讲述了python实现的生成word ...
最新文章
- 为什么CNN模型要使用很多小的卷积核,比如3x3,而不是7x7或者9x9呢?
- 如何php防止XSS攻击
- loam_livox
- 华为云平台使用手册_华为云首发全生命周期应用平台,四大能力解决政企上云五大难题...
- php 通知客户端,PHP+SSE服务器向客户端推送消息
- 企业级IM应该帮助员工提高绩效,避免无关的信息干扰
- 【Python】Python库之网络应用开发
- 在过去的12个月(2016)里,你用到的最多的算法或方法是什么?
- codeforces 768 C. Jon Snow and his Favourite Number(思维+暴力)
- 中学计算机课程课时,初中信息技术基础教案设计(课时).doc
- ZooKeeper原生java客户端使用
- myeclipse服务器未能创建视图:抛出意外异常。
- 在Xcode编译的时候,报这个错误"library not found for -
- 什么是SMART原则?
- 使用Connectify让电脑变为WIFI
- 什么是公司Offer里的RSU?
- 计算机主机电源键,按电脑主机机箱电源键后,却没有任何反应疑难问题
- 如果编程语言是一门武功绝学,那么汇编、C语言······
- SCCM部署系统任务序列失败错误代码0x80070002
- 使用R语言 4秒对10万行qq群聊天记录进行基本的清洗整理
热门文章
- Navicat无法连接SqlServer数据库
- [转载] python内置函数 compile()
- [转载] python difference用法_set.difference() 的用法(python3)_举例说明python3 set方法功能
- Thread 相关函数和属性
- python 全栈开发,Day81(博客系统个人主页,文章详情页)
- Eclipse下创建Spring MVC web程序--非maven版
- IOS --- OC与Swift混编(转)
- 微信公众平台消息接口开发之校验签名与消息响应合并
- Fibonacci算法
- linux之--install超时