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中使用ajax获取远程页面信息
Nov 13 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
leaflet的开发入门教程
Nov 17 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
面包屑导航详解
Dec 07 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
关于uniApp editor微信滑动问题
Jan 15 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
php数组合并的二种方法
2014/03/21 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python安装以及IDE的配置教程
2015/04/29 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
销售经理竞聘书
2014/03/31 职场文书
生物科学专业自荐书
2014/06/20 职场文书
预备党员自我评价范文
2015/03/04 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB