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 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP查询快递信息的方法
2015/03/07 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
VueJS全面解析
2016/11/10 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python赋值操作方法分享
2013/03/23 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python版本的读写锁操作方法
2016/04/25 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
cf战队收人广告词
2014/03/14 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书