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 相关文章推荐
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
了解javascript中变量及函数的提升
May 27 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php算法实例分享
2015/07/14 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP实现简单的计算器
2020/08/28 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python numpy 常用函数总结
2017/12/07 Python
pandas值替换方法
2018/07/10 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
资深生产主管自我评价
2013/09/22 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
教师批评与自我批评
2014/10/15 职场文书
领导班子整改措施
2014/10/24 职场文书
实习生辞职信范文
2015/03/02 职场文书
教师求职信怎么写
2015/03/20 职场文书
消费者投诉书范文
2015/07/02 职场文书