JavaScript, select标签元素左右移动功能实现


Posted in Javascript onMay 14, 2020

通过JavaScript设计一段代码,实现下面的功能.初始界面如下图,选中左面标签中的几个选项后再点-->,则将他们移动到右侧框内,同时左侧选项消失.点击====>后,左侧全部选项移动到右侧.点击右侧几个选项后,再点<---,则这些选项移动到左侧,点<====,则右侧全部选项移动到左侧.代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box_L,#choice,#box_R{
      display: inline-block;
    }

  </style>
</head>
<body>
<div id="box_L">
  <select id="left" multiple size="10">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
    <option>five</option>
    <option>six</option>
  </select>
</div>
<div id="choice">
  <input type="button" width="5px" value="--->" onclick="add()"><br>
  <input type="button" width="5px" value="====>" onclick="addall()"><br>
  <input type="butoon" width="5px" value="<---" onclick="sub()"><br>
  <input type="butoon" width="5px" value="<====" onclick="suball()"><br>
</div>
<div id="box_R">
  <select id="right" size="10" multiple>
    <option>seven</option>
  </select>
</div>

<script>
  var left=document.getElementById("left");
  var right=document.getElementById("right");
  function add(){
    var options=left.children;
    for (var i=0;i<options.length;i++){
      if (options[i].selected==true){
        options[i].selected=false;
        right.appendChild(options[i]);
        i--;
      }
    }
  }

  function addall(){
    var options=left.children;
    for (var i=0;i<options.length;i++){
      right.appendChild(options[i]);
      i--;
    }
  }
  function sub(){
    var options=right.children;
    for (var i=0;i<options.length;i++){
      if (options[i].selected==true){
        options[i].selected=false;
        left.appendChild(options[i]);
        i--;
      }
    }
  }
  function suball(){
    var options=right.children;
    for (var i=0;i<options.length;i++){
      left.appendChild(options[i]);
      i--;
    }
  }
</script>
</body>
</html>

结果如下

JavaScript, select标签元素左右移动功能实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue实现商品列表的添加删除实例讲解
May 14 #Javascript
Vue 自适应高度表格的实现方法
May 13 #Javascript
ES6函数实现排它两种写法解析
May 13 #Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 #Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 #Javascript
原生JS实现汇率转换功能代码实例
May 13 #Javascript
JavaScript Tab菜单实现过程解析
May 13 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Vue.use源码学习小结
2018/06/20 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
对python sklearn one-hot编码详解
2018/07/10 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Python识别处理照片中的条形码
2020/11/16 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
如何写一封打动人心的求职信
2014/02/17 职场文书
个人综合鉴定材料
2014/05/23 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
个人委托书如何写
2014/09/25 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
九年级语文教学反思
2016/03/03 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
MySQL中in和exists区别详解
2021/06/03 MySQL