|
|
@@ -0,0 +1,115 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ select{
|
|
|
+ width: 150px;
|
|
|
+ height: 200px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ button{
|
|
|
+ display: block;
|
|
|
+ width: 150px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .left-box,.right-box{
|
|
|
+ margin-right: 30px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="left-box">
|
|
|
+ <select multiple id="left-sel">
|
|
|
+ <option>选项一</option>
|
|
|
+ <option>选项二</option>
|
|
|
+ <option>选项三</option>
|
|
|
+ <option>选项四</option>
|
|
|
+ <option>选项五</option>
|
|
|
+ <option>选项六</option>
|
|
|
+ <option>选项七</option>
|
|
|
+ </select>
|
|
|
+ <button id="left-sel-btn">选中项移动到右侧</button>
|
|
|
+ <button id="left-all-btn">全部移动到右侧</button>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <select id="right-sel" multiple>
|
|
|
+ <option>选项八</option>
|
|
|
+ </select>
|
|
|
+ <button id="right-sel-btn">选中项移动到左侧</button>
|
|
|
+ <button id="right-all-btn">全部移动到右侧</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var oLeftSel = document.getElementById("left-sel");
|
|
|
+ var oRightSel = document.getElementById("right-sel");
|
|
|
+ var lefSelBtn = document.getElementById("left-sel-btn");
|
|
|
+ var rightSelBtn = document.getElementById("right-sel-btn");
|
|
|
+ var leftAllBtn = document.getElementById("left-all-btn");
|
|
|
+ var rightAllBtn = document.getElementById("right-all-btn");
|
|
|
+ // 实现双击选中项移动到右侧
|
|
|
+ oLeftSel.ondblclick = function(){
|
|
|
+ // 通过选中项的索引获取选中项
|
|
|
+ // var selOption = this.options[this.selectedIndex];
|
|
|
+ // 通过选中项集合获取选中项
|
|
|
+ var selOption = this.selectedOptions[0];
|
|
|
+ // 将选中项添加到右侧
|
|
|
+ oRightSel.appendChild(selOption);
|
|
|
+ }
|
|
|
+ // 实现双击选中项移动到左侧
|
|
|
+ oRightSel.ondblclick = function(){
|
|
|
+ // 获取当前选中项
|
|
|
+ var selOption = this.options[this.selectedIndex];
|
|
|
+ // 将选中项添加到左侧
|
|
|
+ oLeftSel.appendChild(selOption);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 实现选中项移动到右侧
|
|
|
+ lefSelBtn.onclick = function(){
|
|
|
+ // 获取左侧选中项集合
|
|
|
+ var aSelOption = oLeftSel.selectedOptions;
|
|
|
+ var selArr = [];
|
|
|
+ // 创建新数组保存选中项
|
|
|
+ for(var i=0;i<aSelOption.length;i++){
|
|
|
+ selArr.push(aSelOption[i]);
|
|
|
+ }
|
|
|
+ for(var j = 0;j<selArr.length;j++){
|
|
|
+ // 将选中项添加到右侧
|
|
|
+ oRightSel.appendChild(selArr[j]);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 实现选中项移动到左侧
|
|
|
+ rightSelBtn.onclick = function(){
|
|
|
+ // 获取右侧选中项集合
|
|
|
+ var aSelOption = oRightSel.selectedOptions;
|
|
|
+ // 创建新数组保存选中项
|
|
|
+ var selArr = [];
|
|
|
+ for(var i=0;i<aSelOption.length;i++){
|
|
|
+ selArr.push(aSelOption[i]);
|
|
|
+ }
|
|
|
+ // 将选中项添加到左侧
|
|
|
+ for(var j = 0;j<selArr.length;j++){
|
|
|
+ oLeftSel.appendChild(selArr[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 实现全部选中项移动到右侧
|
|
|
+ leftAllBtn.onclick = function(){
|
|
|
+ var allOption = oLeftSel.innerHTML;
|
|
|
+ oRightSel.innerHTML += allOption;
|
|
|
+ oLeftSel.innerHTML = "";
|
|
|
+ }
|
|
|
+ // 实现全部选中项移动到左侧
|
|
|
+ rightAllBtn.onclick = function(){
|
|
|
+ oLeftSel.innerHTML += oRightSel.innerHTML;
|
|
|
+ oRightSel.innerHTML = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
