JavaScript实现两个select下拉框选项左移右移


Posted in Javascript onMarch 09, 2017

今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序,刚刚才开始学javascript还有很多优化的地方。

Javascript代码

<script type="text/javascript"> 
 
   
  /**选中的元素向右移动**/ 
  function moveRight() 
  { 
     
      //得到第一个select对象 
    var selectElement = document.getElementById("first"); 
    var optionElements = selectElement.getElementsByTagName("option"); 
    var len = optionElements.length; 
   
 
    if(!(selectElement.selectedIndex==-1))  //如果没有选择元素,那么selectedIndex就为-1 
    { 
       
      //得到第二个select对象 
      var selectElement2 = document.getElementById("secend"); 
   
        // 向右移动 
        for(var i=0;i<len ;i++) 
        { 
          selectElement2.appendChild(optionElements[selectElement.selectedIndex]); 
        } 
    } else 
    { 
      alert("您还没有选择需要移动的元素!"); 
    } 
  } 
   
  //移动所有的到右边 
  function moveAll() 
  { 
    //得到第一个select对象 
    var selectElement = document.getElementById("first"); 
    var optionElements = selectElement.getElementsByTagName("option"); 
    var len = optionElements.length; 
    //alert(len); 
   
    //将第一个selected中的数组翻转 
    var firstOption = new Array(); 
    for(var k=len-1;k>=0;k--) 
    { 
      firstOption.push(optionElements[k]); 
   
    } 
    var lens = firstOption.length; 
      //得到第二个select对象 
    var selectElement2 = document.getElementById("secend"); 
    for(var j=lens-1;j>=0;j--) 
    { 
      selectElement2.appendChild(firstOption[j]); 
    } 
  } 
   
  //移动选中的元素到左边 
  function moveLeft() 
  { 
    //首先得到第二个select对象 
    var selectElement = document.getElementById("secend"); 
    var optionElement = selectElement.getElementsByTagName("option"); 
    var len = optionElement.length; 
     
    //再次得到第一个元素 
    if(!(selectElement.selectedIndex==-1)) 
    { 
      var firstSelectElement = document.getElementById("first"); 
      for(i=0;i<len;i++) 
      { 
        firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被选中的那个元素的索引 
      } 
    }else 
    { 
      alert("您还没有选中要移动的项目!"); 
    } 
  } 
   
  //全部向左移 
  function moveAllLeft() 
  { 
    var selectElement = document.getElementById("secend"); 
    var optionElements = document.getElementsByTagName("option"); 
    var len = optionElements.length; 
    var optionEls = new Array(); 
    for(var i=len-1;i>=0;i--) 
    { 
      optionEls.push(optionElements[i]); 
    } 
    var lens = optionEls.length; 
     
    var firstSelectElement = document.getElementById("first"); 
    for(var j=lens-1;j>=0;j--) 
    { 
      firstSelectElement.appendChild(optionEls[j]); 
    } 
  } 
</script>

上面是javascript代码,下面是html加css代码。

Html代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
  .select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;} 
  .select_move_1 { float:left;} 
  .select_move_2 { float:left;} 
  .select_move_3 { float:left;} 
</style> 
</head> 
 
<body> 
  <div class="select_move"> 
   
    <div class="select_move_1"> 
     <select name="first" size="10" id="first" multiple="multiple"> 
      <option value="宝马">宝马</option> 
      <option value="丰田">丰田</option> 
      <option value="奥迪">奥迪</option> 
      <option value="凯迪拉克">凯迪拉克</option> 
      <option value="现代">现代</option> 
      <option value="奔驰">奔驰</option> 
      <option value="法拉利">法拉利</option> 
       
     </select> 
    </div> 
     <div class="select_move_2"> 
        <input type="button" value="------>" onclick="moveRight()"/><br /> 
        <input type="button" value="===>" onclick="moveAll()" /><br /> 
        <input type="button" value="<------" onclick="moveLeft()"/><br /> 
        <input type="button" value="<===" onclick="moveAllLeft()"/> 
     </div> 
    <div class="select_move_3"> 
       <select size="10" id="secend" multiple="multiple"> 
       </select> 
    </div> 
  </div> 
   
</body> 
</html>

源码下载:js实现下拉框元素互相移动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
js实现年月日表单三级联动
Apr 17 #Javascript
js实现3D图片展示效果
Mar 09 #Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
完美实现js选项卡切换效果(二)
Mar 08 #Javascript
微信小程序中用WebStorm使用LESS
Mar 08 #Javascript
Vue常用指令V-model用法
Mar 08 #Javascript
You might like
PHP实现的封装验证码类详解
2013/06/18 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
python多线程http下载实现示例
2013/12/30 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
师范生自荐信范文
2013/10/06 职场文书
干部行政关系介绍信
2014/01/17 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
森林防火宣传标语
2014/06/27 职场文书
团委副书记工作总结
2015/08/14 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技
MySQL新手入门进阶语句汇总
2022/09/23 MySQL