溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了如何實現JavaScript, select標簽元素左右移動功能，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
通過JavaScript設計一段代碼,實現下面的功能.初始界面如下圖,選中左面標簽中的幾個選項后再點-->,則將他們移動到右側框內,同時左側選項消失.點擊====>后,左側全部選項移動到右側.點擊右側幾個選項后,再點<---,則這些選項移動到左側,點<====,則右側全部選項移動到左側.代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box_L,#choice,#box_R{
display: inline-block;
}
</style>
</head>
<body>
<div id="box_L">
<select id="left" multiple size="10">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
</select>
</div>
<div id="choice">
<input type="button" width="5px" value="--->" onclick="add()"><br>
<input type="button" width="5px" value="====>" onclick="addall()"><br>
<input type="butoon" width="5px" value="<---" onclick="sub()"><br>
<input type="butoon" width="5px" value="<====" onclick="suball()"><br>
</div>
<div id="box_R">
<select id="right" size="10" multiple>
<option>seven</option>
</select>
</div>
<script>
var left=document.getElementById("left");
var right=document.getElementById("right");
function add(){
var options=left.children;
for (var i=0;i<options.length;i++){
if (options[i].selected==true){
options[i].selected=false;
right.appendChild(options[i]);
i--;
}
}
}
function addall(){
var options=left.children;
for (var i=0;i<options.length;i++){
right.appendChild(options[i]);
i--;
}
}
function sub(){
var options=right.children;
for (var i=0;i<options.length;i++){
if (options[i].selected==true){
options[i].selected=false;
left.appendChild(options[i]);
i--;
}
}
}
function suball(){
var options=right.children;
for (var i=0;i<options.length;i++){
left.appendChild(options[i]);
i--;
}
}
</script>
</body>
</html>結果如下
以上就是關于如何實現JavaScript, select標簽元素左右移動功能的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
