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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
express express-session的使用小结
2018/12/12 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python开头的coding设置方法
2019/08/08 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
专题组织生活会方案
2014/06/15 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
心术观后感
2015/06/11 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL