DOM操作和jQuery实现选项移动操作的简单实例

2019-11-20 09:45:57

字体：大中小

来源：转载

供稿：网友

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实现选项移动操作的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

下一篇：Knockoutjs 学习系列(二)花式捆绑