<!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. python2.X和3.X的一些区别【整理中】

    1.性能 Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可  以取得很好的优化结果.  Py3.1性能比P ...

  2. 一次神奇的WCF的404错误解决

    现象:浏览器中可以访问元数据,但是运行的时候却报404的异常,说目标地址找不到. 折腾了一下午. 引用服务后config中的client的address是这样的http://host/aspx/Ser ...

  3. linux基础-第六单元 用户、群组和权限

    用户及passwd文件 /etc/passwd文件的功能 /etc/passwd文件每个字段的具体含义 shadow文件 /etc/shadow文件的功能 /etc/shadow文件每个字段的具体含义 ...

  4. Android下常见的四种对话框

    摘要:在实际开发过程有时为了能够和用户进行很好的交互,需要使用到对话框,在Android中常用的对话框有四种:普通对话框.单选对话框.多选对话框.进度对话框. 一.普度对话框 public void ...

  5. asp.net MVC添加HtmlHelper扩展示例和用法

    一.先创建一个HtmlHelper的扩展类,代码: using System; using System.Collections.Generic; using System.Linq; using S ...

  6. git创建仓库

    创建仓库 git init: Git 使用 git init 命令来初始化一个 Git 仓库,Git 的很多命令都需要在 Git 的仓库中运行,所以 git init 是使用 Git 的第一个命令. ...

  7. c#学习<四>：C#2.0、C#3.0

    委托的演变 委托(C#1.0) 委托可看作是只定义了一个方法的接口,将委托的实例看作实现了这个接口的一个对象. 委托的执行要满足4个条件: 1. 声明委托类型                     ...

  8. Js 校验时间、比较时间 和转换时间格式

    function checkDate(obj){ var strDate = obj.value; var nowDate = new Date(); var a=/^(\d{1,4})(-|\/)( ...

  9. REST服务返回自定义的HttpResponseMessage

    WebApi框架中对资源的操作,都是通过其Controller提供的各种方法(GET,POST,PUT,DELET等)来实现,而这些方法的返回信息有以下几种形式: 方法返回类型 HttpRespons ...

  10. jsrender-for循环中访问父属性

    jsrender中使用for循环数据时有时需要访问父级数据. 而jsrender在循环中的父级数据存放在隐藏属性parent.parent.data中,使用案例如下 {{:#parent.parent ...