<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水果选择</title>

</head>

<style type="text/css">

       select{

           width: 200px;

           height: 100px;

       }

</style>

<body>

      <h1>水果选择：</h1>

       <select name="" id="left"  size="">

                 <option>苹果</option>

                 <option>橘子</option>

                 <option>香蕉</option>

                 <option>西瓜</option>

                 <option>草莓</option>

       </select>

       <input type="button"  value=">>" name="" id="btn">

      <select name="" id="right" size=""></select>

</body>

<script type="text/javascript">

        btn=document.getElementById('btn');

        left=document.getElementById('left');

        right=document.getElementById('right');

        opts=left.options;

        btn.onclick=function(){

              idx=left.selectedIndex;

              right.add(opts[idx]);

        }

</script>

</html>

JS左右栏目添加器的更多相关文章

  1. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  2. PHPCMS v9栏目添加字段及描述编辑器修改方法

    为PHPCMS v9栏目添加字段和把描述的textarea编辑器变成fceditor编辑器的方法.如下: 1. 添加数据库字段:description1,添加位置:v9_catetory表 2. 在c ...

  3. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  4. 使用yarn代替npm作为node.js的模块管理器

    使用yarn代替npm作为node.js的模块管理器 转 https://www.jianshu.com/p/bfe96f89da0e     Fast, reliable, and secure d ...

  5. 织梦DedeCMS给栏目添加缩略图调用的方法

    织梦DedeCMS的栏目调用仅仅只有文字调用,没有栏目缩略图调用,而我们有时候又需要给栏目添加缩略图,并能够在前台调用,就可以试试通过下面的方法,给栏目添加缩略图. 首先要给栏目数据库表添加一个存储缩 ...

  6. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  7. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  8. js改变或添加className

    js改变或添加className <style type="text/css"> .newDiv { font-weight: bold; } </style&g ...

  9. dedecms为导航栏目添加英文标题

    最近公司官网是使用 DedeCMS 做的,这个项目中要使用到为导航栏目添加英文标题,就查找资料把它实现了. 根据设计图写成静态页面后是这样的效果: 操作步骤如下: 1. 修改数据表,添加英文字段 影响 ...

随机推荐

  1. RHCE认证考试教材

    前段时间考RHCE7,顺便给大家分享下RHCE6.7的中文教材!毕竟此书是官方的培训教材,还是值得看看!RHEL6.7承前启后的,给个赞! 下载:http://pan.baidu.com/s/1nu9 ...

  2. Go--避免SQL注入

    避免SQL注入 什么是SQL注入 SQL注入攻击(SQL Injection),简称注入攻击,是Web开发中最常见的一种安全漏洞.可以用它来从数据库获取敏感信息,或者利用数据库的特性执行添加用户,导出 ...

  3. 标准Web系统的架构分层

    标准Web系统的架构分层 – 转载请注明出处 1.架构体系分层图 在上图中我们描述了Web系统架构中的组成部分.并且给出了每一层常用的技术组件/服务实现.需要注意以下几点: 系统架构是灵活的,根据需求 ...

  4. javascript 数组实例

    在遍历数组时, 如果想要排除 null / undefined 和 不存在的元素时,代码如下: for ( var i = 0; i < a.length; i++ ){ //跳过null / ...

  5. 网络流HDU 2883

    建图           源点  ->     每个人  ->           每段时间      ->      汇点 时间要离散化一下 分成一些时间段 权           ...

  6. AOP 学习笔记

    代理是一个设计模式,提供了对目标对象另外的访问方式:即通过代理访问目标对象. 好处:可以在目标对象实现的基础上,增强额外的功能操作. Cglib 代理,也叫作 子类代理. JDK的动态代理有一个限制, ...

  7. JS-slider.js实现鼠标拖动滑块控制取值特效

    制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值 源码: <div id="example"> <div id="slideContaine ...

  8. 12 抽象函数-abstract

    只有函数的定义,没有函数体的函数被称为抽象函数 1.抽象函数就是没有函数体的函数 2.抽象类使用abstract来定义 3.抽象类不能生产对象,但是可以拥有构造函数 abstract void fun ...

  9. 怎么学习AOPR使用方法

    Advanced Office Password Recovery作为一款专业级别的Office密码破解工具,对十几种office文档的密码都可以有效的破解.一些用户朋友才开始接触Advanced O ...

  10. nginx--配置https服务器

    1.下载安装nginx: nginx可以从这里选择对应版本下载,我下载的是1.8.1版本.下载完成后,直接解压缩,命令窗口进入根目录,输入命令: start nginx 在浏览器中,直接输入" ...