脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

结果如下

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

您可能感兴趣的文章:

相关文章

  • javascript里模拟sleep(两种实现方式)

    javascript里模拟sleep(两种实现方式)

    有几种方式，但都不完美 其一:不断循环，直到达到指定时间、其二:用xhr同步请求后台程序，比如传2000过去，后台就sleep 2秒后再返回，这种方式也有缺点，当N多客户端都请求后台时，一直保持连接http开销很大,感兴趣的朋友可以了解下啊
    2013-01-01
  • JavaScript定时器setTimeout()和setInterval()详解

    JavaScript定时器setTimeout()和setInterval()详解

    这篇文章主要为大家详细介绍了JavaScript定时器setTimeout()和setInterval()的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Canvas 绘制粒子动画背景

    Canvas 绘制粒子动画背景

    本文主要分享了Canvas 绘制粒子动画背景的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • PassWord输入框代码分享

    PassWord输入框代码分享

    这篇文章主要介绍了PassWord输入框的代码,代码简单易懂，非常实用，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • List Installed Software Features

    List Installed Software Features

    List Installed Software Features...
    2007-06-06
  • javascript 用函数实现继承详解

    javascript 用函数实现继承详解

    下面小编就为大家带来一篇javascript 用函数实现继承详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript省市级联功能实现方法实例详解

    javascript省市级联功能实现方法实例详解

    这篇文章主要介绍了javascript省市级联功能实现方法,以不同实例形式分析了JavaScript实现省市级联菜单的具体技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JS进阶指南之你真的掌握变量和类型了吗

    JS进阶指南之你真的掌握变量和类型了吗

    变量是存储信息的容器(JS的变量名是区分大小写的),下面这篇文章主要给大家介绍了关于JS进阶指南之变量和类型的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 微信小程序中如何实现轮播图效果

    微信小程序中如何实现轮播图效果

    这篇文章主要介绍了微信小程序中实现轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • JS实现获取键盘按下的按键并显示在页面上的方法

    JS实现获取键盘按下的按键并显示在页面上的方法

    这篇文章主要介绍了JS实现获取键盘按下的按键并显示在页面上的方法,涉及JavaScript针对键盘事件及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论