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 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 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
帅气的琦玉老师
2020/03/02 日漫
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PDO实现学生管理系统
2020/03/21 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Python 第一步 hello world
2009/09/25 Python
对python中的高效迭代器函数详解
2018/10/18 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
银行先进个人事迹材料
2014/05/11 职场文书
公司员工离职证明书
2014/10/04 职场文书
干部个人考察材料
2014/12/24 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers