如何实现JavaScript中select标签元素的左右选择移动功能？

更新于

2026-09-25 12:55:01

2阅读来源：SEO基础

内容介绍
文章标签
相关推荐

本文共计644个文字，预计阅读时间需要3分钟。

通过JavaScript编写一段代码，实现以下功能：初始界面如下，选中左侧标签中的几个选项后点击--，则将它们移动到右侧框架内，同时左侧选项消失。点击=后，左侧全部选项移动到右侧。点击右侧=后，右侧全部选项移动到左侧。

javascript// HTML部分

Item 1 Item 2 Item 3

// JavaScript部分function moveItems(fromPanel, toPanel) { const items=document.getElementById(fromPanel + 'Items').querySelectorAll('.item'); const toPanelItems=document.getElementById(toPanel + 'Items').querySelectorAll('.item');

items.forEach(item=> { item.style.display='none'; document.getElementById(toPanel + 'Items').appendChild(item); });}

function moveAllItems(fromPanel, toPanel) { const items=document.getElementById(fromPanel + 'Items').querySelectorAll('.item'); items.forEach(item=> { item.style.display='none'; document.getElementById(toPanel + 'Items').appendChild(item); });}

通过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 标签元素左右