如何在jQuery中实现点击按钮时追加带选中值的select下拉框？

嘿，我来帮你搞定这个需求！想要点击按钮后克隆一个保留选中值的select下拉框，其实关键点在于正确使用jQuery的克隆方法，还要避免现有代码里的一些小问题。

先说说你现有代码的小问题 #

1. 你重复创建了同一个id的<form id="dir_frm">，多次点击会生成多个重复id的元素，这不符合HTML规范哦；
2. 直接使用.html(write_html)会覆盖掉.original容器里的原有内容，应该用追加的方式；
3. 克隆元素时没有传递true参数，默认的浅克隆可能不会完整保留select的选中状态（虽然简单场景下可能也生效，但深度克隆更稳妥）。

完整实现方案 #

第一步：先准备好基础HTML结构

<!-- 原始的下拉框和触发按钮 -->
<div class="original">
  <select class="dir-insp-new-lay">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>
  <button id="cloneSelectBtn">点击克隆下拉框</button>
</div>

第二步：编写jQuery逻辑

$(document).ready(function() {
  // 绑定按钮的点击事件
  $('#cloneSelectBtn').on('click', function() {
    // 1. 获取原始的select元素
    const originalSelect = $('.dir-insp-new-lay');
    // 2. 深度克隆select，传入true会复制元素的事件和表单状态（包括选中值）
    const clonedSelect = originalSelect.clone(true);
    // 3. 如果你需要把克隆的select放到form里（根据你的原有代码需求）
    // 这里用class代替id，避免多次克隆后出现重复id的问题
    const newForm = $('<form class="dir-frm"></form>').append(clonedSelect);
    // 4. 把新的form（或直接克隆的select）追加到目标容器里
    $('.original').append(newForm);
    
    // 如果你不需要form包裹，直接追加克隆的select即可：
    // $('.original').append(clonedSelect);
  });
});

关键知识点解释 #

• clone(true)：这是核心！jQuery的clone()方法如果传入true，会进行深度克隆，不仅复制元素结构，还会复制元素绑定的事件处理函数，以及表单元素的当前状态（比如select的选中值、输入框的内容、复选框的勾选状态等）。如果不传true，只会复制元素结构，状态不会保留。
• 使用append而非html：html()方法会覆盖容器内的所有现有内容，而append()是在容器末尾追加新元素，能保留原有内容，更符合你“追加”的需求。
• 避免重复id：不要给克隆出来的元素设置固定id，改用class或者动态生成唯一id，否则会导致页面上出现多个相同id的元素，引发样式或JS逻辑的问题。

针对你原有代码的修正版本 #

如果想保留你原本的form逻辑，可以调整成这样：

$('#cloneSelectBtn').on('click', function() {
  // 深度克隆select，保留选中状态
  var dir_lay = $('.dir-insp-new-lay').clone(true);
  // 用class代替id，避免重复
  var write_html = $('<form class="dir_frm"></form>').append(dir_lay);
  // 追加而不是覆盖原有内容
  $('.original').append(write_html);
});

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