1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>下拉列表左右选择</title>
  6.          <style type="text/css">
  7.              div {
  8.                  width: 200px;
  9.                  float: left;
  10.              }
  11.              select {
  12.                  width: 100px;
  13.                  height: 180px;
  14.                  padding: 10px;
  15.              }
  16.          </style>
  17.      </head>
  18.      <body>
  19.          <div>
  20.              <select multiple="multiple" id="leftSel" style="margin-left: 17px;">
  21.                  <option>选项1</option>
  22.                  <option>选项2</option>
  23.                  <option>选项3</option>
  24.                  <option>选项4</option>
  25.                  <option>选项5</option>
  26.                  <option>选项6</option>
  27.                  <option>选项7</option>
  28.                  <option>选项8</option>
  29.                  <option>选项9</option>
  30.                  <option>选项10</option>
  31.              </select>
  32.              <br />
  33.              <input type="button" value="选中添加到右边 ->" onclick="choiceToRight()">
  34.              <br />
  35.              <input type="button" value="全部添加到右边 -->" onclick="allToRight()">
  36.          </div>
  37.  
  38.          <div>
  39.              <select multiple="multiple" id="rightSel" style="margin-left: 17px;"></select>
  40.              <br />
  41.              <input type="button" value="<- 选中添加到左边" onclick="choiceToLeft()">
  42.              <br />
  43.              <input type="button" value="<-- 全部添加到左边" onclick="allToLeft()">
  44.          </div>
  45.  
  46.          <script type="text/javascript">
  47.              // 获取select
  48.              var leftSel = document.getElementById("leftSel");
  49.              var rightSel = document.getElementById("rightSel");
  50.              // 选中添加到右边
  51.              function choiceToRight() {
  52.                  toSel(leftSel, rightSel, true);
  53.              }
  54.              // 全部添加到右边
  55.              function allToRight() {
  56.                  toSel(leftSel, rightSel, false);
  57.              }
  58.              // 选中添加到左边
  59.              function choiceToLeft() {
  60.                  toSel(rightSel, leftSel, true);
  61.              }
  62.              // 全部添加到左边
  63.              function allToLeft() {
  64.                  toSel(rightSel, leftSel, false);
  65.              }
  66.              // 如果flag为true，就是选中添加，如果为false，就是全部添加
  67.              function toSel(fromSel, toSel, flag) {
  68.                  var subSel = fromSel.getElementsByTagName("option");
  69.                  if (flag) {
  70.                      for (var i = 0; i < subSel.length; i++) {
  71.                          if (subSel[i].selected) {
  72.                              toSel.appendChild(subSel[i]);
  73.                              // 因为subSel的length每次会-1，所以让i归零，保证每次for循环都能被执行到
  74.                              i--;
  75.                          }
  76.                      }
  77.                  } else {
  78.                      for (var i = 0; i < subSel.length; i++) {
  79.                          toSel.appendChild(subSel[i]);
  80.                          i--;
  81.                      }
  82.                  }
  83.              }
  84.          </script>
  85.      </body>
  86.  </html>

JavaScript基础2——下拉列表左右选择的更多相关文章

  1. JavaScript案例五：下拉列表左右选择

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

  2. 【JavaWeb】JavaScript 基础

    JavaScript 基础 事件 事件是指输入设备与页面之间进行交互的响应. 常用的事件: onload 加载完成事件:页面加载完成之后,常用于页面 js 代码初始化操作: onclick 单击事件: ...

  3. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  4. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  5. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  6. javascript基础语法——词法结构

    × 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...

  7. JavaScript基础插曲—元素样式，正则表达式，全局模式，提取数组

    JavaScript基础学习 学习js的基础很重要,可以让自己有更多的技能.我相信这个以后就会用到. Eg:点击选择框,在div中显示出选择的数量 window.onload = function() ...

  8. JavaScript基础—插曲

    Javascript基础 1:js中我们最好使用单引号,其实可以使用双引号的但是为了区别所以js中全部使用单引号.注释和C#的是一样的.网页里面的执行顺序是从上到下依次执行的,不管你js放到哪里,都会 ...

  9. js实现-下拉列表左右选择

    下拉列表左右选择          * 下拉选择框               <select>                     <option>111</opt ...

随机推荐

  1. Linux学习-通过loganalyzer展示MySQL中rsyslog日志

    一.实验环境 系统:CentOS7.6 软件包:apache,php,mariadb-server (都是基于光盘yum源) 源码包:loganalyzer-4.1.7.tar.gz (http:// ...

  2. 使用mongodb

    1.安装 yarn add moogose 2.启动 在命令行 mongod --dbpath D:\data//这是最后出现 waiting for connections on port 2701 ...

  3. B/S大文件下载+断点续传

    1.先将 webuploader-0.1.5.zip 这个文件下载下来:https://github.com/fex-team/webuploader/releases  根据个人的需求放置自己需要的 ...

  4. 树状数组板子 x

    树状数组! 参考 http://www.cnblogs.com/zzyh/p/6992148.html 洛谷 P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: ...

  5. shell 中使用正则表达式

    ls | xargs echo | sed 's/.*\(\w\+\)\s\(\w\+\s\)*\1d.*/\1/' 说明 \w\+表示一段连续的字符串 \s\+ 一个或者多个空格 \s* 0个或者多 ...

  6. gsxt滑动验证码

    最后,谈谈滑动验证码. 目前,工商网站已经全面改版,全部采用了滑动验证码,上面绝大多数思路都失效了.对于滑动验证码,网上能搜到的解决方案基本都是下载图片,还原图片,算出滑动距离,然后模拟js来进行拖动 ...

  7. layer系列之弹层layer.prompt

    layer官网:https://www.layui.com/doc/modules/layer.html layer在线调试:http://layer.layui.com/ 如何使用layer.pro ...

  8. dd备份命令使用

    转载——dd 参数解释 1. if=文件名:输入文件名,缺省为标准输入.即指定源文件.< if=input file > 2. of=文件名:输出文件名,缺省为标准输出.即指定目的文件.& ...

  9. curl_init raw传递json参数

    protected function curl_vm_record($url, $platform, $authorization, $jsonStr) { $ch = curl_init(); cu ...

  10. Django路由小知识

    from django.urls import path,re_path from app01 import views urlpatterns = [ re_path(r'^articles/200 ...