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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
详解vue项目打包步骤
Mar 29 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
js实现点击烟花特效
Oct 14 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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/12/21 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
防火标语大全
2014/10/06 职场文书
2014年村官工作总结
2014/11/24 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书