jQuery问题：列表框间移动的项无法访问，影响服务端处理

我之前也碰到过一模一样的情况！界面上看选项明明移过去了，但断点检查或者后端接收的时候就是拿不到正确的数据，核心问题大多出在DOM操作不彻底或者服务端读取的配置不对上，我给你一步步拆解解决方案：

1. 先确认你的移动操作是真正的DOM迁移，不是克隆或隐藏 #

很多人会误用clone()来复制选项，结果原选项还留在原来的select里，导致后端读取时拿到重复数据；或者用CSS隐藏选项，看起来移走了但DOM还在原地。

正确的做法是用detach()移除原选项，再appendTo()到目标select——detach()会保留元素的所有数据和绑定事件，比remove()更适合移动场景：

// 把左侧选中项移到右侧
$('#btnAdd').click(function() {
  $('#leftSelect option:selected').detach().appendTo('#rightSelect');
});

// 把右侧选中项移回左侧
$('#btnRemove').click(function() {
  $('#rightSelect option:selected').detach().appendTo('#leftSelect');
});

2. 确保服务端能正确读取目标select的数据 #

这一步很容易被忽略：

• 如果你的select是多选的，必须加上multiple属性，否则只能选中一个选项，后端只能拿到单个值；
• 给目标select设置正确的name属性，要用数组形式（比如name="selectedZips[]"），这样后端才能接收多个选项的值；
• 如果服务端需要获取目标select的所有项（而不仅仅是选中的），可以在表单提交前把目标select的所有选项设为选中状态：

  $('form').submit(function() {
    // 提交前选中右侧所有选项，确保后端能拿到全部数据
    $('#rightSelect option').prop('selected', true);
  });
  

3. 调试时一定要看DOM结构，别只看界面 #

界面显示可能会骗你！打开浏览器开发者工具的「Elements」标签，直接查看两个select的DOM内容，确认移动后的选项是不是真的在目标select里面，而不是还留在原select或者其他DOM节点下。

完整示例代码（HTML+jQuery） #

HTML结构 #

<div class="row" id="zip">
  <div class="col-sm-10 col-sm-offset-2" style="padding-left: 0px;">
    <div class="row">
      <div class="col-sm-4">
        <!-- 左侧可选列表 -->
        <select id="leftSelect" name="availableZips[]" multiple class="form-control" size="8">
          <option value="10001">10001</option>
          <option value="10002">10002</option>
          <option value="10003">10003</option>
        </select>
      </div>
      <div class="col-sm-2 text-center" style="margin-top: 30px;">
        <button type="button" id="btnAdd" class="btn btn-block">&gt;&gt;</button>
        <button type="button" id="btnRemove" class="btn btn-block" style="margin-top: 10px;">&lt;&lt;</button>
      </div>
      <div class="col-sm-4">
        <!-- 右侧已选列表 -->
        <select id="rightSelect" name="selectedZips[]" multiple class="form-control" size="8">
        </select>
      </div>
    </div>
  </div>
</div>

jQuery逻辑 #

$(function() {
  // 添加选中项到右侧
  $('#btnAdd').click(function() {
    $('#leftSelect option:selected').detach().appendTo('#rightSelect');
  });

  // 移除选中项到左侧
  $('#btnRemove').click(function() {
    $('#rightSelect option:selected').detach().appendTo('#leftSelect');
  });

  // 提交表单前选中右侧所有选项（按需启用）
  $('form').submit(function() {
    $('#rightSelect option').prop('selected', true);
  });
});

按照这个方式修改后，你再断点检查DOM结构，或者后端接收数据，应该就能拿到正确的移动后选项了。

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