JavaScript+HTML实现商品的左右选择功能

最新推荐文章于 2023-04-13 11:28:47 发布

VIP文章 justinzwd

最新推荐文章于 2023-04-13 11:28:47 发布

阅读量1.8k

点赞数 1

分类专栏： Java 文章标签： JavaScript HTML

本文链接：https://blog.csdn.net/justinzwd/article/details/89034628

版权

功能简介：如下图所示，将“已有商品”中的商品选中移动到右边的“未有商品”，这里可以选中单个选项移动，也可以实现一次性全部移动。同理，右边中的“未有商品”的选项也可以选中然后移动到左边的“已有商品”区域。

在很多示例中都实现了从左往右移的单一功能，这里实现了双向自由移动的功能。
在这里插入图片描述
刚开始写双向移动的时候，遇到了一些问题，就是从右向左移动时会出现左边区域和右边区域选项同时被选中的问题，这样就只是两个元素来回互换，并不能实现自由移动。

后来想到数据结构中的栈，可以利用“栈”中元素的特点，来解决这个问题。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function selectOneLeftToRight()
			{
				//获取左边的元素和右侧的元素
				var selectLeft = document.getElementById("leftSelect");
				var selectRight  = document.getElementById("rightSelect");
				
				var opt

最低0.47元/天解锁文章

justinzwd

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+HTML实现商品的左右选择功能

功能简介：如下图所示，将“已有商品”中的商品选中移动到右边的“未有商品”，这里可以选中单个选项移动，也可以实现一次性全部移动。同理，右边中的“未有商品”的选项也可以选中然后移动到左边的“已有商品”区域。在很多示例中都实现了从左往右移的单一功能，这里实现了双向自由移动的功能。刚开始写双向移动的时候，遇到了一些问题，就是从右向左移动时会出现左边区域和右边区域选项同时被选中的问题，这样就只是两个元...
复制链接

扫一扫