基于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 相关文章推荐
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 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入门速成(2)
2006/10/09 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
拖拉表格的JS函数
2008/11/20 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
python3简单实现微信爬虫
2015/04/09 Python
Python的pycurl包用法简介
2015/11/13 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python批量处理文件或文件夹
2020/07/28 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python笔记之facade模式
2019/11/20 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python help函数实例用法
2020/12/06 Python
用python实现一个简单的验证码
2020/12/09 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
成考报名单位证明范本
2014/01/16 职场文书
聘任书模板
2014/03/29 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
接待员岗位职责范本
2015/04/15 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
车间班组长竞聘书
2015/09/15 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript