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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
angular directive的简单使用总结
May 24 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
node.js博客项目开发手记
Mar 16 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 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 截取字符串专题集合
2010/08/19 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
javascript的事件描述
2006/09/08 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
Python函数学习笔记
2008/10/07 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
医学院校毕业生自荐信范文
2014/01/01 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript