当前位置:网站首页>JS native implementation shuttle box
JS native implementation shuttle box
2022-07-06 08:29:00 【Wind billows】
The first is the basic style of the shuttle box
Respectively by the left border , The shuttle button and the right border form
The function of the shuttle box is to click the button , The content in the box can shuttle to other boxes
I don't say much nonsense , Code up
1. Basic structure of shuttle box
<!-- Basic structure of shuttle box -->
<div class="container">
<!-- Left box -->
<div class="left">
<h3>xxx My current girlfriend </h3>
<select id="sel1" multiple>
<option value="1"> Power </option>
<option value="2"> tearful </option>
<option value="3"> Chunchun </option>
<option value="4"> Yingying </option>
<option value="5"> Red red </option>
</select>
</div>
<!-- Shuttle button -->
<div class="left mid">
<p>
<button id="btnToRight" title=" Move the selected right ">>></button>
</p>
<p>
<button id="btnToRightAll" title=" Move all right ">>>|</button>
</p>
<p>
<button id="btnToLeft" title=" Move the selected left "><<</button>
</p>
<p>
<button id="btnToLeftAll" title=" Move left all ">|<<</button>
</p>
</div>
<!-- Right side box -->
<div class="left">
<h3>xxx My ex girlfriend </h3>
<select id="sel2" multiple>
<option value="6"> Hyk </option>
</select>
</div>
</div>
2. Basic style of shuttle box
<style>
.container {
overflow: hidden;
width: 550px;
margin: 0 auto;
}
.container .left {
float: left;
margin: 0 30px;
}
.container select {
width: 100%;
height: 200px;
}
.container .mid {
padding-top: 70px;
}
</style>
3. Shuttle box right shuttle and left shuttle
<script>
// Define variables to hold the values to shuttle
var value = null;
// Left box
var Os1 = document.getElementById("sel1")
// Right side box
var Os2 = document.getElementById("sel2")
// Move the selected right
var Or = document.getElementById("btnToRight")
// Move all right
var OrA = document.getElementById("btnToRightAll")
// Move the selected left
var Ol = document.getElementById("btnToLeft")
// Move left all
var OlA = document.getElementById("btnToLeftAll")
// Move the selected button to the right to add a click event
Or.onclick = function() {
// All moves are from the first data in the current list
// Judge whether the first data in the current list has data
if (Os1.children[0].innerHTML) {
// Get the value of the first data
value = Os1.children[0].innerHTML
// Delete the tag containing the first data
Os1.children[0].remove();
// Create a new label
Oop = document.createElement("option");
// Put the saved data into the label
Oop.innerHTML = value;
// Add this tag to the end of another list
Os2.appendChild(Oop)
}
}
// It is basically the same as moving right
Ol.onclick = function() {
if (Os2.children[0].innerHTML) {
value = Os2.children[0].innerHTML
Os2.children[0].remove();
Oop = document.createElement("option");
Oop.innerHTML = value;
Os1.appendChild(Oop)
}
}
// Add a click event to the move right all button
OrA.onclick = function() {
// Get the data of the list node label from end to end
for (var i = Os1.children.length - 1; i >= 0; i--) {
// Judge whether the last data in the current list has data
if (Os1.children[i].innerHTML) {
// Get the value of the last
value = Os1.children[i].innerHTML;
// Delete the tag containing the last data
Os1.children[i].remove();
// Create a new label
Oop = document.createElement("option");
// Put the saved data into the label
Oop.innerHTML = value;
// Add this tag to the end of another list
Os2.appendChild(Oop)
}
}
}
// It is basically the same as moving right
OlA.onclick = function() {
for (var i = Os2.children.length - 1; i >= 0; i--) {
if (Os2.children[i].innerHTML) {
value = Os2.children[i].innerHTML
Os2.children[i].remove();
Oop = document.createElement("option");
Oop.innerHTML = value;
Os1.appendChild(Oop)
}
}
}
</script>
边栏推荐
- matplotlib. Widgets are easy to use
- Research Report on Market Research and investment strategy of microcrystalline graphite materials in China (2022 Edition)
- 【云原生】手把手教你搭建ferry开源工单系统
- Leetcode skimming (5.29) hash table
- 从表中名称映射关系修改视频名称
- [research materials] 2021 live broadcast annual data report of e-commerce - Download attached
- VMware 虚拟化集群
- Use Alibaba icon in uniapp
- Leetcode question brushing (5.31) string
- How to use information mechanism to realize process mutual exclusion, process synchronization and precursor relationship
猜你喜欢
vulnhub hackme: 1
[research materials] 2022 China yuancosmos white paper - Download attached
synchronized 解决共享带来的问题
Summary of phased use of sonic one-stop open source distributed cluster cloud real machine test platform
ESP series pin description diagram summary
JVM performance tuning and practical basic theory - Part 1
【MySQL】数据库的存储过程与存储函数通关教程(完整版)
Sort according to a number in a string in a column of CSV file
化不掉的钟薛高,逃不出网红产品的生命周期
3. File operation 3-with
随机推荐
2022 Inner Mongolia latest construction tower crane (construction special operation) simulation examination question bank and answers
1202 character lookup
Vocabulary notes for postgraduate entrance examination (3)
使用 TiDB Lightning 恢复 S3 兼容存储上的备份数据
C language custom type: struct
Hcip day 16
Summary of MySQL index failure scenarios
MFC sends left click, double click, and right click messages to list controls
C语言自定义类型:结构体
logback1.3. X configuration details and Practice
堆排序详解
Upgrade tidb with tiup
leetcode刷题 (5.31) 字符串
Make learning pointer easier (3)
Pyqt5 development tips - obtain Manhattan distance between coordinates
Use Alibaba icon in uniapp
JVM performance tuning and practical basic theory - Part 1
Online yaml to CSV tool
Permutation and combination function
Huawei cloud OBS file upload and download tool class