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 相关文章推荐
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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
php4的彩蛋
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
中专毕业生的自我鉴定
2013/12/01 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
地理教师岗位职责
2014/03/16 职场文书
感恩教育活动总结
2014/05/05 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
五一晚会主持词
2015/07/01 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书