JavaScript实现左右下拉框动态增删示例


Posted in Javascript onMarch 09, 2017

选中下拉框中的选项实现左移右移

效果:

JavaScript实现左右下拉框动态增删示例

1. Html部分代码

<body>
<table align="center">
  <tr>
    <td ><select size="15" id="left" >
      <option>左1</option>
      <option>左2</option>
      <option>左3</option>
      <option>左4</option>
      <option>左5</option>
      <option>左6</option>
      <option>左7</option>
      <option>左8</option>
      <option>左9</option>
      <option>左10</option>
    </select></td>

    <td>
      <input type="button" value="MoveRight" onclick="moveRight()"><br>
      <input type="button" value="MoveAllRight" onclick="moveAllright()"/><br>
      <input type="button" value="MoveLeft" onclick="moveLeft()"><br>
      <input type="button" value="MoveAllLeft" onclick="moveAllLeft()"><br>
    </td>


    <td>
      <select size="15" id="right">
        <option>右1</option>
        <option>右2</option>
        <option>右3</option>
        <option>右4</option>
        <option>右5</option>
        <option>右6</option>
        <option>右7</option>
      </select>
    </td>

    <td></td>
  </tr>

  </table>

</body>

2. JavaScript脚本代码如下:

<script type="text/javascript">
   function moveRight()
   {
     //获取左边select元素节点
     var leftSelectNode = document.getElementById("left");
     //获取子元素节点数组
     //如果选定的索引号为-1,则提示用户
     if (leftSelectNode.selectedIndex == -1)
     {
       alert("请选定需要移动的选项");
       return;
     }
     //获取待移动的选项
     var waitSelection = leftSelectNode.options[leftSelectNode.selectedIndex];
     //获取右边的selec元素节点并加入
     var rightSelectNode = document.getElementById("right");
     //右边新增一个节点
     rightSelectNode.appendChild(waitSelection);

   }

   function moveAllright()
   {//获取select对象
     var leftSelectNode = document.getElementById("left");
     var rightSelectNode = document.getElementById("right");

     var optionsNodes = leftSelectNode.options;

     var length = optionsNodes.length;
     for (var i = 0; i < length; i++)
     {
       rightSelectNode.appendChild(optionsNodes[0]);
     }
   }

   function moveLeft()
   {
     //获取左边的select对象
    var rightSelectNode = document.getElementById("right");
    //没有选中则提示
     if (rightSelectNode.selectedIndex == -1)
     {
       alert("请选择一个选项");
       return;
     }
     //获取待移动的选项
     var waitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex];
     //获取左边的select对象
     var leftSelectNode = document.getElementById("left");

     //左边的select对象加入节点
     leftSelectNode.appendChild(waitMoveNode);

   }
   function moveAllLeft()
   {
     //获取右边的select对象
     var rightSelectNode = document.getElementById("right");
     var leftSelectNode = document.getElementById("left");

     var length = rightSelectNode.options.length;

     //遍历其option选项并加入到左边的select中
     for (var i = 0; i < length; i++)
     {
       leftSelectNode.appendChild(rightSelectNode.options[0]);
     }
   }

  </script>

3.CSS简单代码如下:

<style>
    select, td
    {
      font:20px/40px '宋体';
    }
    option {width: 100px;
      font:20px/40px '宋体';
    }
    input {
      padding: 3px;
      font:20px/40px '宋体';
      text-align: center;
      width: 130px;
      height: 40px;
      background-color: orange;
    }
  </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
两个Javascript小tip资料
Nov 23 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
ECMAScript6--解构
Mar 30 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
完美实现js选项卡切换效果(二)
Mar 08 #Javascript
微信小程序中用WebStorm使用LESS
Mar 08 #Javascript
Vue常用指令V-model用法
Mar 08 #Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 #Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 #Javascript
js实现倒计时效果(小于10补零)
Mar 08 #Javascript
You might like
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php cli配置文件问题分析
2015/10/15 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
javascript 面向对象 function类
2010/05/13 Javascript
js的写法基础分析
2011/01/17 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
python装饰器decorator介绍
2014/11/21 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
生产车间主任的个人自我鉴定
2013/10/25 职场文书
建筑项目策划书
2014/01/13 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
大学生学期个人总结
2015/02/12 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
工程款申请报告
2015/05/15 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书