基于JavaScript实现下拉列表左右移动代码


Posted in Javascript onFebruary 07, 2017

废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码。

效果图如下所示:

基于JavaScript实现下拉列表左右移动代码

代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>选择式下拉菜单</title> 
<script language="javascript" type="text/javascript">  
  function moveOption(e1, e2){  
    try{  
      for(var i=0;i<e1.options.length;i++){  
        if(e1.options[i].selected){  
          var e = e1.options[i];  
          e2.options.add(new Option(e.text, e.value));  
          e1.remove(i);  
          ii=i-1; 
        }  
      }  
      document.form1.city.value=getvalue(document.form1.list2);  
    }catch(e){ 
     }  
  }  
   function getvalue(geto){  
    var allvalue = "";  
    for(var i=0;i<geto.options.length;i++){  
      allvalue +=geto.options[i].value + ",";  
    }  
    return allvalue;  
  } 
   function changepos(obj,index)  
  {  
    if(index==-1){  
      if (obj.selectedIndex>0){  
        //obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) //swapNode方法只有IE才支持 
        obj.insertBefore(obj.options[obj.selectedIndex], obj.options[obj.selectedIndex - 1]);  
      }  
    }else if(index==1){  
      if (obj.selectedIndex<obj.options.length-1){  
        //obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) //swapNode方法只有IE才支持 
        obj.insertBefore(obj.options[obj.selectedIndex + 1], obj.options[obj.selectedIndex]);   
      }  
    }  
  }  
</script> 
<style type="text/css"> 
body { 
  font-size: 16px; 
  color: #003300; 
} 
</style> 
</head> 
<body> 
<form method="post" name="form1" action="" style="text-align:center;"> 
 <table border="0" width="300" align="center"> 
  <tr> 
   <td width="40%"><select style="width:100%" multiple name="list1" size="12" ondblclick="moveOption(document.form1.list1, document.form1.list2)"> 
     <option value="张三">张三</option> 
     <option value="李四">李四</option> 
     <option value="王五">王五</option> 
     <option value="赵六">赵六</option> 
     <option value="钱七">钱七</option> 
     <option value="软件">软件</option> 
     <option value="客服">客服</option> 
     <option value="硬件">硬件</option> 
     <option value="安全">安全</option> 
     <option value="会计">会计</option> 
     <option value="出纳">出纳</option> 
    </select></td> 
   <td width="20%" align="center"><input type="button" value="添加" onclick="moveOption(document.form1.list1, document.form1.list2)"/> 
    <br/> 
    <br/> 
    <input type="button" value="删除" onclick="moveOption(document.form1.list2, document.form1.list1)"/></td> 
   <td width="40%"><select style="width:100%" multiple name="list2" size="12" ondblclick="moveOption(document.form1.list2, document.form1.list1)"> 
    </select></td> 
   <td><input type="button" value="上移" onclick="changepos(list2,-1)"/> 
    <br/> 
    <br/> 
    <input type="button" value="下移" onclick="changepos(list2,1)"/></td> 
  </tr> 
 </table> 
 值: 
 <input type="text" name="city" size="40" /> 
</form> 
<p align="center">选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),<br /> 
 或在选择项上双击进行添加和移除。</p> 
</body> 
</html>

以上所述是小编给大家介绍的基于JavaScript实现下拉列表左右移动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
关于vue面试题汇总
Mar 20 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 #Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 #Javascript
javascript表达式和运算符详解
Feb 07 #Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 #Javascript
原生js和css实现图片轮播效果
Feb 07 #Javascript
bootstrap输入框组使用方法
Feb 07 #Javascript
angularjs使用directive实现分页组件的示例
Feb 07 #Javascript
You might like
PHP正确配置mysql(apache环境)
2011/08/28 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
异常和异常类的概念
2014/09/12 面试题
灰雀教学反思
2014/04/28 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers