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 相关文章推荐
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
浅析node.js中close事件
Nov 26 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
vue实现lodop打印功能的示例
Nov 11 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 array_unique之后json_encode需要注意
2011/01/02 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
js select option对象小结
2013/12/20 Javascript
node.js中watch机制详解
2014/11/17 Javascript
使用console进行性能测试
2015/04/27 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python3制作捧腹网段子页爬虫
2017/02/12 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
总经理岗位职责说明书
2014/07/30 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
党校党性分析材料
2014/12/19 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
演讲开场白台词大全
2015/05/29 职场文书
2015年十月一日放假通知
2015/08/18 职场文书