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 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
详解vue项目构建与实战
Jun 27 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python中元类用法实例
2014/10/10 Python
python求最大连续子数组的和
2018/07/07 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python对常见数据类型的遍历解析
2019/08/27 Python
py-charm延长试用期限实例
2019/12/22 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
热门专业求职信
2014/05/24 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫