脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript, select

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

 更新时间：2020年05月14日 08:37:50   作者：Iceberg_710815  
这篇文章主要介绍了JavaScript, select标签元素左右移动功能实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

通过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>

结果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • bootstrap里bootstrap动态加载下拉框的实例讲解

    bootstrap里bootstrap动态加载下拉框的实例讲解

    今天小编就为大家分享一篇bootstrap里bootstrap动态加载下拉框的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js控制表单不能输入空格的小例子

    js控制表单不能输入空格的小例子

    这篇文章主要介绍了js控制表单不能输入空格的小例子，有需要的朋友可以参考一下
    2013-11-11
  • js实现九宫格抽奖

    js实现九宫格抽奖

    这篇文章主要为大家详细介绍了js实现九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 用 js 的 selection range 操作选择区域内容和图片

    用 js 的 selection range 操作选择区域内容和图片

    本篇文章主要介绍了用js的selection range操作选择区域内容和图片的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Jupyter Notebook运行JavaScript的方法

    Jupyter Notebook运行JavaScript的方法

    Jupyter Notebook是一块所见即所得的画布，通过在浏览器上编辑代码，让开发人员实现展示与快速迭代的利器，本文主要介绍了Jupyter Notebook运行JavaScript的方法，感兴趣的可以了解一下
    2021-05-05
  • JS 图片压缩原理与实现方法详解

    JS 图片压缩原理与实现方法详解

    这篇文章主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • Div上下居中

    Div上下居中

    Div上下居中...
    2007-02-02
  • JS实现图片切换效果

    JS实现图片切换效果

    这篇文章主要为大家详细介绍了基于JavaScript实现图片切换效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

    ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

    这篇文章主要介绍了ionic js 模型 $ionicModal 可以遮住用户主界面的内容框的相关资料,需要的朋友可以参考下
    2016-06-06
  • JavaScript中的Proxy代理的用法和功能详解

    JavaScript中的Proxy代理的用法和功能详解

    Proxy代理是JavaScript中一项强大而灵活的功能，它可以用于拦截、修改和自定义对象的底层操作，这篇文章主要介绍了JavaScript中的Proxy代理的各种用法和功能,需要的朋友可以参考下
    2023-06-06

最新评论