DOM操作和jQuery实现选项移动操作的简单实例


Posted in Javascript onJune 07, 2016

DOM:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM选项移动操作</title>
  <style>
    select {
      width: 100px;
      height: 85px;
    }

    div {
      display: inline-block;
      width: 50px
    }
  </style>
</head>
<body>
     <select id="unsel" size="5" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select>
    <div>
      <button onclick="move(this.innerHTML)">>></button>
      <button onclick="move(this.innerHTML)">></button>
      <button onclick="move(this.innerHTML)"><</button>
      <button onclick="move(this.innerHTML)"><<</button>
    </div>
    <select id="sel" size="5" multiple>
    </select>
  <script>
    function $(id){
      return document.getElementById(id);
    }
    var unsel=null;//保存所有备选国家列表
    var sel=[];//保存已选中的国家列表
    window.onload=function(){
      unsel=$("unsel").innerHTML
              .replace(/<\/?option>/g," ")
              .match(/\b[a-zA-Z]+\b/g);
    }
    function move(inner){
      switch (inner){
        case ">>"://全部右移
          sel=sel.concat(unsel);
          unsel.length=0;
          sel.sort();
          break;
        case "<<"://全部左移
          unsel=unsel.concat(sel);
          sel.length=0;
          unsel.sort();
          break;
        case ">"://选中项右移
          var opts=document.querySelectorAll("#unsel option");
          //从后向前遍历每个option
          for(var i=opts.length-1;i>=0;i--){
            if(opts[i].selected){
            //删除unsel中i位置的1个元素,直接压入sel
              sel.push(unsel.splice(i,1)[0]);
            }
          }
          sel.sort();
          break;
        case "<"://选中项左移
          var opts=document.querySelectorAll("#sel option");
          for(var i=opts.length-1;i>=0;i--){
            if(opts[i].selected){
              unsel.push(sel.splice(i,1)[0]);
            }
          }
          unsel.sort();
          break;
      }
      show();
    }
    function show(){//将两个数组,更新到select元素中
      $("unsel").innerHTML="<option>"
                +unsel.join("</option><option>")
                +"</option>";
      $("sel").innerHTML="<option>"
                +sel.join("</option><option>")
                +"</option>";
    }
  </script>
</body>
</html>

jquery:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项移动操作</title>
  <script src="jquery.min.js"></script>
  <style>
    select {
      width: 100px;
      height: 85px;
    }

    div {
      display: inline-block;
      width: 50px
    }
  </style>
</head>
<body>
  <select id="first" size="5" multiple>
    <option>Argentina</option>
    <option>Brazil</option>
    <option>Canada</option>
    <option>Chile</option>
    <option>China</option>
    <option>Cuba</option>
    <option>Denmark</option>
    <option>Egypt</option>
    <option>France</option>
    <option>Greece</option>
    <option>Spain</option>
  </select>
  <div>
    <button id="add">></button>
    <button id="add_all">>></button>
    <button id="remove"><</button>
    <button id="remove_all"><<</button>
  </div>
  <select id="second" size="5" multiple>
  </select>

  <script>
      $("#add").click(function(){
        // 将左边被选中的选项,移到右边去
        $("#first>option:selected").appendTo($("#second"));
      });
      $("#add_all").click(function(){
        $("#first>option").appendTo($("#second"));
      });
      $("#remove").click(function(){
        $("#second>option:selected").appendTo($("#first"));
      });
      $("#remove_all").click(function(){
        $("#second>option").appendTo($("#first"));
      });
      // 双击事件
      $("#first").dblclick(function(){
        $("#first>option:selected").appendTo($("#second"));
      });
      $("#second").dblclick(function(){
        $("#second>option:selected").appendTo($("#first"));
      });
  </script>
</body>
</html>

以上这篇DOM操作和jQuery实现选项移动操作的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
jquery 图片轮换效果
Jul 29 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
基于node.js之调试器详解
Aug 22 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
Knockoutjs 学习系列(二)花式捆绑
Jun 07 #Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 #Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 #Javascript
Javascript之Number对象介绍
Jun 07 #Javascript
Javascript之Math对象详解
Jun 07 #Javascript
分享jQuery网页元素拖拽插件
Dec 01 #Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 #Javascript
You might like
PHP 文件上传全攻略
2010/04/28 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
摘自启点的main.js
2008/04/20 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python中functools模块函数解析
2017/03/12 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python程序暂停的正常处理方法
2019/11/07 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Python读写压缩文件的方法
2020/07/30 Python
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
个人自我鉴定写法
2013/11/30 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
环境卫生标语
2014/06/09 职场文书
创新社会管理心得体会
2014/09/12 职场文书
教师个人成长总结
2015/02/11 职场文书
管辖权异议上诉状
2015/05/23 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js