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代码
Jan 28 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
javascript常用对话框小集
Sep 13 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
java必学必会之static关键字
Dec 03 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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/07/03 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php事务处理实例详解
2014/07/11 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
js中less常用的方法小结
2017/08/09 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
pandas中去除指定字符的实例
2018/05/18 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
银行贷款承诺书
2014/03/29 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Django实现聊天机器人
2021/05/31 Python
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python