7.html原生js：穿梭框，左右框添加数据

最新推荐文章于 2023-05-18 15:01:58 发布

天翼丶

最新推荐文章于 2023-05-18 15:01:58 发布

阅读量2.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/duhasohfsig/article/details/111915307

版权

该博客介绍了一种使用原生JavaScript实现穿梭框功能的方法，通过监听按钮事件，将左侧选择框中选中的选项添加到右侧。提供了实现效果的代码示例，可以直接运行。

摘要由CSDN通过智能技术生成

原理就是，有两个select框和两个点击按钮。向右→添加时，获取左边option的选中状态，所有选中的option加到右边去
效果图：
在这里插入图片描述

可复制代码，直接运行

<div style="border:1px solid #ccc;margin-top:10px;padding:10px;">  //格式调整
	<table width="98%" border="0" align="center" cellspacing='0'cellpadding='0' class=''>  
		<tr>  
			//这是左边的框：未授权数据
			<td style="width: 40%;border: 0px;text-align: center;padding-left: 0px;">  
				<div style="padding-left: 20px;text-align: left;">未授权数据</div>
				<div><select id="unGrant" name="unGrant" multiple size="20" style="width: 300px;margin-left: 0px;line-height: 25px;height: 384px;">
				<option value="选项1">选项1</option>
                <opti