左侧列表+复选，右侧按照顺序输出选中的值
https://ask.csdn.net/questions/7535072?spm=1001.2014.3001.5501
基于两年前的链接问题：左侧列表+复选，右侧按照顺序输出选中的值
现想进一步优化解决方案和思路达到以下效果，希望专家提供一下合适的解决方法，参考学习一下，感谢
图片演示：
动态演示：
大概和题主要求的效果如下，看下
https://www.w3dev.cn/demo/tree/tree2/
嗯，不知道是否符合你的要求，这是一种实现方式：通过HTML、CSS和JavaScript来实现。
HTML部分：
<div class="container">
<ul class="left-list">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<div class="right-list">
<ul class="selected-list"></ul>
</div>
</div>
#示例中包含左侧列表和右侧列表的容器<div class="container">。在左侧列表中，我们有一个无序列表<ul class="left-list">，其中每个列表项都是一个选项。在右侧列表中，我们有一个空的无序列表<ul class="selected-list">，用于显示选中的选项
CSS部分：
.container {
display: flex;
}
.left-list {
list-style: none;
padding: 0;
margin: 0;
}
.left-list li {
padding: 10px;
cursor: pointer;
}
.right-list ul {
list-style: none;
padding: 0;
margin: 0;
}
#使用了Flex布局，使左侧列表和右侧列表水平排列
JavaScript部分：
const leftList = document.querySelector('.left-list'); // 获取左侧列表元素
const selectedList = document.querySelector('.selected-list'); // 获取右侧已选中的选项列表元素
// 给左侧列表项添加点击事件监听器
leftList.addEventListener('click', (event) => {
const item = event.target; // 获取被点击的选项项元素
if (item.tagName === 'LI') { // 判断是否是列表项元素
// 将选中的选项移除
const selectedItems = document.querySelectorAll('.selected-item');
selectedItems.forEach((item) => {
item.classList.remove('selected-item'); // 移除已选中项的样式
item.querySelector('span').remove(); // 移除已选中项前面的勾选符号
});
// 将当前选项设置为选中状态
item.classList.add('selected-item'); // 添加已选中项的样式
const checkMark = document.createElement('span'); // 创建勾选符号元素
checkMark.classList.add('check-mark'); // 添加勾选符号的样式
checkMark.innerHTML = '✔'; // 设置勾选符号的内容为✔
item.insertBefore(checkMark, item.firstChild); // 将勾选符号插入到选项前面
// 将选中的选项添加到右侧已选中的选项列表中
const index = leftList.indexOf(item); // 获取当前选项在左侧列表中的索引位置
const selectedItem = document.createElement('li'); // 创建已选中的选项元素
selectedItem.innerText = leftList.items[index].innerText; // 设置已选中项的内容为当前选项的内容
selectedItem.classList.add('selected-item'); // 添加已选中项的样式
selectedList.appendChild(selectedItem); // 将已选中项添加到右侧已选中的选项列表中
}
});
实现思路如下：
1.左侧树结构的数据需要通过接口获取，并且每个对象中要有父级id和子级id关联
2.右侧的数据也需要通过接口获取，这里涉及到后端的表关联，通过左侧树结构点击传递id来获取右侧的数据，从而进行展示
当然这是有接口的情况下实现思路，
如果没有后端支持，建议将左侧的树结构静态话到工程目录数据结构最好是json格式， 右侧的数据也需要写在json里，这样也可以实现，
如果想更加具体的了解可以私信我哈， 创作不易，如果对你有帮助，希望可以给个采纳哦！当然其他问题也可以问我，我也会详细解答，共同进步
您可以使用HTML和JavaScript来实现左侧列表加复选框，右侧输出选中值的功能
```html
html
<!DOCTYPE html>
<html>
<head>
<title>左侧列表加复选框，右侧输出选中值</title>
<meta charset="UTF-8">
<style type="text/css">
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 80%;
margin: 0 auto;
padding: 20px;
}
.left {
width: 40%;
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.right {
width: 40%;
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.btn {
margin-top: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h3>左侧列表</h3>
<ul>
<li><input type="checkbox" value="1">选项1</li>
<li><input type="checkbox" value="2">选项2</li>
<li><input type="checkbox" value="3">选项3</li>
<li><input type="checkbox" value="4">选项4</li>
<li><input type="checkbox" value="5">选项5</li>
</ul>
</div>
<div class="right">
<h3>右侧输出选中值</h3>
<div id="output"></div>
<button class="btn" onclick="outputSelected()">输出选中值</button>
</div>
</div>
<script type="text/javascript">
function outputSelected() {
var outputDiv = document.getElementById("output");
var selected = [];
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selected.push(checkboxes[i].value);
}
}
outputDiv.innerHTML = selected.join("<br>");
}
</script>
</body>
</html>
```
可以参考下
<script>
//注意：
// 在<form 标签里，记得写上 οnsubmit="checkform();selall()"
// 其中checkform() 指的是你的检查表单是否填写完整的函数。在我给你的范例里没有体现。
// 那个 selall() 的用途是，把被选到右边窗口里的数据全部选中，只有选部选中，才能在php处理页面里得到传递值。
function selit()
{
oo=document.all.osort;
nn=document.all.nsort;
if(nn.options.length>=4)
{
alert('对不起，最多只能选4项！');
return false;
}
sel=oo.selectedIndex;
if(sel==-1)return false;
nvalue=oo.options[oo.selectedIndex].text;
nn.options.add(new Option(nvalue,nvalue));
oo.options.remove(oo.selectedIndex);
}
function delit()
{
oo=document.all.osort;
nn=document.all.nsort;
sel=nn.selectedIndex;
if(sel==-1)return false;
ovalue=nn.options[nn.selectedIndex].text;
oo.options.add(new Option(ovalue,ovalue));
nn.options.remove(nn.selectedIndex);
}
function selall()
{
nn=document.all.nsort;
for(i=0;i<nn.options.length;i++)
{
nn.options[i].selected=true;
}
}
</script>
<select name="osort" size="6" multiple id="osort" style='width:120' οndblclick='selit()'>
<option value="1">
床上用品 </option>
<option value="2">
家具桌椅 </option>
<option value="3">
厨房设备 </option>
<option value="4">
办公设备 </option>
<option value="8">
密胺产品 </option>
<option value="9">
不锈钢餐具 </option>
<option value="10">
塑料产品 </option>
<option value="11">
针织服装 </option>
<option value="12">
高新设备 </option>
<option value="13">
后勤基建 </option>
<option value="14">
电器设备 </option>
<option value="15">
其他产品 </option>
<option value="16">
招商信息 </option>
<option value="17">
餐饮设备 </option>
<option value="18">
酒店服务 </option>
</select>*
<select name="sort[]" id='nsort' multiple size="6" style='width:120' οndblclick='delit()'></select>
*
不太能懂你的需求，你能够录制动画了，不就已经实现了吗？