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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
JS继承 笔记
Jul 13 Javascript
js 走马灯简单实例
Nov 21 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP-MySQL教程归纳总结
2008/06/07 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
Javascript浅谈之this
2013/12/17 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
Vue 的 v-model用法实例
2020/11/23 Vue.js
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
银行自荐信范文
2013/10/07 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
优秀小学生家长评语
2014/01/30 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
国培计划培训感言
2014/03/11 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
mysql如何查询连续记录
2022/05/11 MySQL
Java界面编程实现界面跳转
2022/06/16 Java/Android