基于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实现下拉列表左右移动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS设置下拉列表框当前所选值的方法

    本文实例讲述了JS设置下拉列表框当前所选值的方法.分享给大家供大家参考,具体如下: 1. JS代码: function setSelectOption(objId, targetValue){ //objid:下拉列表框的ID:targetValue:当前所选值 var obj = document.getElementById(objId); if(obj){ var options = obj.options; if(options){ var len = options.length; f

  • AngularJS使用ngOption实现下拉列表的实例代码

    AngularJS使用ngOption实现下拉列表的实例代码

    下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • javascript实现在下拉列表中显示多级树形菜单的方法

    javascript实现在下拉列表中显示多级树形菜单的方法

    本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • javascript下拉列表中显示树形菜单的实现方法

    javascript下拉列表中显示树形菜单的实现方法

    很简单的一个使用:点击菜单,能够显示下面的或者不显示. 1.主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2.采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常

  • js实现下拉列表选中某个值的方法(3种方法)

    本文实例讲述了js实现下拉列表选中某个值的方法.分享给大家供大家参考,具体如下: 方法1: <select id="aa"> <option>1</option> <option>2</option> </select> <input type="button" value=" 选中" onclick="checkOption()" /> &l

  • 用JavaScript来美化HTML的select标签的下拉列表效果

    用JavaScript来美化HTML的select标签的下拉列表效果

    首先通过一个例子来回顾一下select标签的用法: <html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">

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

    基于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"

  • 基于JavaScript实现轮播图代码

    基于JavaScript实现轮播图代码

    一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • 基于javascript实现获取最短路径算法代码实例

    这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 路径 class GetAutoPath{ constructor(id, map, sPos, ePos, mapArr){ //this.type = id.type; this.id = id; this.map = map; this.sPos = sPos; this.ePos = eP

  • 基于JavaScript实现十五拼图代码实例

    顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易. css代码 body { font-family: cursive; font-size: 14pt; text-align: center; } #puzzlearea { height: 400px; margin: 0 auto; position: relative; width: 400px; } .highlight { border-color: red; curs

  • 基于JavaScript实现猜数字游戏代码实例

    环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 index.html 文件,然后输入以下内容. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <style&

  • 基于JavaScript实现简单抽奖功能代码实例

    基于JavaScript实现简单抽奖功能代码实例

    为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡 先来看看页面效果吧: 点击抽取就可以抽签了,红色框会显示内容,(PS:红色框是没有的,仅仅做描述) 抽取到的效果图如下,字体会随机滚动,最后停止: 里面的抽取内容完全可以替换,,,, 下面贴上代码: <!DOCTYPE html> <html lang="zh"> <head> &l

  • JavaScript实现下拉列表

    JavaScript实现下拉列表

    本文实例为大家分享了JavaScript实现下拉列表的具体代码,供大家参考,具体内容如下 这一次写了一个比较简单的下拉列表的实现,点击出现列表内容,再次点击列表消失,研究了很久,发现这种js写法确实比较好用.先看一下效果. 直接上代码,js是主要写的部分,css是随意调试的,不过这个写法要用到css. 1.HTML部分的代码 <body> <!--最外面的一层--> <div class="outer"> <!-- 里面的--> <

  • 基于JavaScript实现图片连播和联级菜单实例代码

    基于JavaScript实现图片连播和联级菜单实例代码

    <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> div{ border: 1px solid red; width:218px; height: 218px; } .show{ display: inline-block; } .hide{ display: none; } </style> <meta charset="UTF-8&quo

  • 基于JavaScript实现鼠标向下滑动加载div的代码

    废话不多说了,关键代码如下所示: <!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> <title> new

  • 基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统

    废话不多说了,直接给大家贴js代码了,代码附有注释,感兴趣的朋友一起学习吧. /** * Author: laixiangran. * Created by laixiangran on 2015/12/02. * 检测访问网页的浏览器呈现引擎.平台.Windows操作系统.移动设备和游戏系统 * ******************************************************************** * 各版本浏览器在windows10.0下的用户代理字符串:

随机推荐