JavaScript实现的select点菜功能示例


Posted in Javascript onJanuary 16, 2017

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>点菜</title>
  <style type="text/css">
    select{ width:120px;
    }
  </style>
</head>
<body>
<select id="select1">
  <option value="1">鸡蛋汤</option>
  <option value="2">海带汤</option>
  <option value="3">万峦猪脚</option>
  <option value="4">炸猪排</option>
  <option value="5">上海醉蟹</option>
  <option value="6">红烧狮子头</option>
  <option value="7">排骨炖白菜</option>
</select>
<input type="button" id="btnAdd" value="添加" />
<input type="button" id="btnClear" value="取消" />
<select id="select2">
</select>
<input type="button" id="btnOk" value="确定" />
<script type="text/javascript">
  //初始化 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);
    }
  }
</script>
</body>
</html>

运行效果图如下:

JavaScript实现的select点菜功能示例

JavaScript实现的select点菜功能示例

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

Javascript 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
js实现分页功能
May 24 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 #Javascript
js实现弹窗暗层效果
Jan 16 #Javascript
js实现简单的计算器功能
Jan 16 #Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 #Javascript
基于jQuery实现的打字机效果
Jan 16 #Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php对象工厂类完整示例
2018/08/09 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python实现移位加密和解密
2019/03/22 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
小组名称和口号
2014/06/09 职场文书
户籍证明格式
2014/09/15 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript