|
|
@@ -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>
|
|
|
+ .box1,.box2{
|
|
|
+ float: left;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ select{
|
|
|
+ width: 100px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ button{
|
|
|
+ display: block;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box1">
|
|
|
+ <select multiple id="sel-left">
|
|
|
+ <option>选项一</option>
|
|
|
+ <option>选项二</option>
|
|
|
+ <option>选项三</option>
|
|
|
+ <option>选项四</option>
|
|
|
+ <option>选项五</option>
|
|
|
+ <option>选项六</option>
|
|
|
+ </select>
|
|
|
+ <button id="sel-left-btn">选中移动到右侧</button>
|
|
|
+ <button id="all-left-btn">全部移动到右侧</button>
|
|
|
+ </div>
|
|
|
+ <div class="box2">
|
|
|
+ <select multiple id="sel-right">
|
|
|
+ <option>选项七</option>
|
|
|
+ </select>
|
|
|
+ <button id="sel-right-btn">选中移动到左侧</button>
|
|
|
+ <button id="all-right-btn">全部移动到左侧</button>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var oSelLeft = document.getElementById("sel-left");
|
|
|
+ var oSelRight = document.getElementById("sel-right");
|
|
|
+ var selLeftBtn = document.getElementById("sel-left-btn");
|
|
|
+ var selRightBtn = document.getElementById("sel-right-btn");
|
|
|
+ var allLeftBtn = document.getElementById("all-left-btn");
|
|
|
+ var allRightBtn = document.getElementById("all-right-btn");
|
|
|
+ // 左侧下拉列表的双击事件
|
|
|
+ oSelLeft.ondblclick = function(){
|
|
|
+ // console.log(this.selectedOptions);
|
|
|
+ // console.log(this.options);
|
|
|
+ // console.log(this.selectedIndex);
|
|
|
+ // console.log(this.options[this.selectedIndex]);
|
|
|
+ // 获取双击的选中项
|
|
|
+ var selOption = this.selectedOptions[0];
|
|
|
+ // 将选中项移动到右侧下拉列表中
|
|
|
+ oSelRight.append(selOption);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右侧下拉列表的双击事件
|
|
|
+ oSelRight.ondblclick = function(){
|
|
|
+ var selOption = this.selectedOptions[0];
|
|
|
+ oSelLeft.append(selOption);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 左侧下拉框选中移动到右侧下拉框
|
|
|
+ selLeftBtn.onclick = function(){
|
|
|
+ var selOptions = oSelLeft.selectedOptions;
|
|
|
+ var selArr = [];
|
|
|
+ for(var j=0;j<selOptions.length;j++){
|
|
|
+ selArr.push(selOptions[j]);
|
|
|
+ }
|
|
|
+ for(var i=0;i<selArr.length;i++){
|
|
|
+ oSelRight.append(selArr[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //右侧下拉框选中移动到左侧
|
|
|
+ selRightBtn.onclick = function(){
|
|
|
+ var selOptions = oSelRight.selectedOptions;
|
|
|
+ var selArr = [];
|
|
|
+ for(var i=0;i<selOptions.length;i++){
|
|
|
+ selArr.push(selOptions[i]);
|
|
|
+ }
|
|
|
+ for(var j=0;j<selArr.length;j++){
|
|
|
+ oSelLeft.append(selArr[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //左侧全部移动到右侧按钮
|
|
|
+ allLeftBtn.onclick = function(){
|
|
|
+ //方法一
|
|
|
+ // var allOption = [];
|
|
|
+ // for(var j=0;j<oSelLeft.options.length;j++){
|
|
|
+ // allOption.push(oSelLeft.options[j])
|
|
|
+ // }
|
|
|
+ // for(var i=0;i<allOption.length;i++){
|
|
|
+ // oSelRight.append(allOption[i]);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // oSelRight.innerHTML = oSelRight.innerHTML + oSelLeft.innerHTML;
|
|
|
+ oSelRight.innerHTML += oSelLeft.innerHTML;
|
|
|
+ oSelLeft.innerHTML = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右侧全部移动到左侧按钮
|
|
|
+ allRightBtn.onclick = function(){
|
|
|
+ oSelLeft.innerHTML += oSelRight.innerHTML;
|
|
|
+ oSelRight.innerHTML = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
