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检测字符串中是否含有html标签实现方法
Jul 01 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
js前端图片加载异常兜底方案
Jun 21 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php实现登陆模块功能示例
2016/10/20 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
如何理解python中数字列表
2020/05/29 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python爬虫如何解决图片验证码
2021/02/14 Python
Python与C/C++的相互调用案例
2021/03/04 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
初一地理教学反思
2014/01/16 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers