如何使用jQuery实现两个listbox列表框之间的选项双向移动功能

问题根因 #

• HTML结构不合法：<select> 元素的合法子元素只能是 <option> 或 <optgroup>，你在 <select id="lstBox1"> 内部嵌套了 <ul>、<li> 元素，浏览器会自动解析错误结构，导致你写的列表项根本不会被识别为select的可选选项，jQuery选择器 $('#lstBox1 option:selected') 永远选不到元素，自然无法触发移动逻辑。
• ID重复冲突：你给 <select> 和内部的 <ul> 都设置了 id="lstBox1"，ID是页面唯一标识，重复ID会导致DOM选择器匹配异常。
• 缺少对应DOM节点：你的jQuery代码是基于select下的option元素做移动逻辑的，但实际页面里没有符合要求的option节点。

修正方案 #

1. 调整HTML结构 #

把非法嵌套的ul/li替换为标准的option/optgroup结构，删除重复ID，可选加简单样式方便交互：

<div class="data_wrap list-padding">
    <div class="approveTermsContainer" style="display: flex;gap:20px;align-items: center;">
        <div class="newItems"> 
            <b>send</b>
            <br />
            <select multiple="multiple" id='lstBox1' style="width:200px;height:300px;">
                <optgroup label="heading test">
                    <option value="test">test</option>
                </optgroup>
            </select>
        </div>
        <div class="transferBtns">
            <input type='button' id='btnRight' value='  >  ' />
            <br />
            <input type='button' id='btnLeft' value='  <  ' /> 
        </div>
        <div class="approvedItems"> 
            <b>receive</b>
            <br />
            <select multiple="multiple" id='lstBox2' style="width:200px;height:300px;"> </select>
        </div>
    </div>
</div>

如果你需要保留原有的树形交互效果，就不要用<select>做容器，直接用div包裹ul/li，给li加选中状态样式即可，对应的JS选择器也要改成匹配选中的li元素。

2. 优化jQuery逻辑 #

原JS逻辑本身的判断逻辑是正确的，你可以简化冗余的clone+remove操作，直接用append移动DOM元素即可：

$(document).ready(function () {
  // 右移逻辑
  $('#btnRight').click(function (e) {
    e.preventDefault();
    const selectedOpts = $('#lstBox1 option:selected');
    if (selectedOpts.length === 0) {
      alert("Nothing to move.");
      return;
    }
    $('#lstBox2').append(selectedOpts);
  });

  // 左移逻辑
  $('#btnLeft').click(function (e) {
    e.preventDefault();
    const selectedOpts = $('#lstBox2 option:selected');
    if (selectedOpts.length === 0) {
      alert("Nothing to move.");
      return;
    }
    $('#lstBox1').append(selectedOpts);
  });
});

直接append选中的元素就会自动把原位置的元素移除，不需要额外clone再删除。

内容的提问来源于stack exchange，提问作者T dhanunjay