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 相关文章推荐
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
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实现 上一篇、下一篇的代码
2012/09/29 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript动态加载三
2012/08/22 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python定时器实例代码
2017/11/01 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python super的使用方法及实例详解
2019/09/25 Python
python3图片文件批量重命名处理
2019/10/31 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
工程力学专业毕业生求职信
2013/10/06 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers