如何将form内元素移到外部div显示且不丢失表单功能

完全可以实现，有两种成熟方案可选，均可保留原有表单提交功能，适配动态页面场景：

方案1：CSS动态定位（不修改DOM结构） #

不需要改动现有DOM结构，通过动态同步坐标实现视觉上的位置转移，下拉框物理上仍在form标签内，表单逻辑完全不受影响：

代码实现 #

/* 右侧目标容器设置相对定位作为锚点，预留对应高度避免内容挤压 */
.sort-order-container {
  position: relative;
  min-height: 40px; /* 调整为和你的下拉框实际高度一致即可 */
}
/* 要移动的下拉框设置为绝对定位，调高层级避免被其他内容遮挡 */
.move-this-outside {
  position: absolute;
  z-index: 10;
}

function syncDropdownPos() {
  const target = document.querySelector('.sort-order-container');
  const dropdown = document.querySelector('.move-this-outside');
  const targetRect = target.getBoundingClientRect();
  // 同步下拉框位置和尺寸到目标容器
  dropdown.style.top = `${targetRect.top + window.scrollY}px`;
  dropdown.style.left = `${targetRect.left + window.scrollX}px`;
  dropdown.style.width = `${targetRect.width}px`;
}

// 页面加载、窗口缩放时自动同步位置
window.addEventListener('load', syncDropdownPos);
window.addEventListener('resize', syncDropdownPos);

// 监听页面动态内容变化（分页、横幅加载等场景）自动同步
const observer = new MutationObserver(syncDropdownPos);
observer.observe(document.body, { childList: true, subtree: true });

方案2：DOM迁移+form属性关联（布局更稳定） #

直接将下拉框物理移动到目标容器内，通过HTML5原生form属性关联原表单，提交时参数会自动包含，和放在form标签内效果完全一致，无需维护定位逻辑：

代码实现 #

第一步给原form添加id属性：

<div class="left-sidebar">
  <!-- 新增form的id -->
  <form id="filter-form">
    <div class="move-this-outside">Dropdown is here</div>
  </form>
</div>
<div class="page-content">
  <div class="sort-order-container">Here i need to drop it</div>
</div>

第二步执行DOM迁移逻辑：

const dropdown = document.querySelector('.move-this-outside');
const targetContainer = document.querySelector('.sort-order-container');
// 给下拉框内所有表单控件添加form属性，关联原表单
dropdown.querySelectorAll('select, input, button').forEach(el => {
  el.setAttribute('form', 'filter-form');
});
// 直接迁移到目标容器
targetContainer.appendChild(dropdown);

方案选择建议 #

• 若你完全不想改动原有表单的DOM结构和逻辑，选择方案1
• 若你希望适配更稳定，不需要处理定位同步的边缘情况，选择方案2，所有现代浏览器均支持form属性，兼容性良好。

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