javascript - 为什么复制 html 后我的 select 的值会自行重置？

Question

我在 display: none; div 中有一个表单，因此我可以在向用户显示之前设置所有复选框和其他输入。

形式类似于:

代码块#1

<div class="hiddendiv" style="display:none;">
  <form id="someid">
    <input type="checkbox" id="check1" />
    <input type="checkbox" id="check2" />
    <input type="checkbox" id="check3" />
    <select id="selid">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
   </select>
  </form>
</div>

然后我通过 JQuery 设置所有值:

代码块#2

if(something){
    $('#check1').attr('checked', true);
}

if(something2){
    $('#check2').attr('checked', true);
}

if(something3){
    $('#check3').attr('checked', true);
}

$('#selid').val(5);

最后，我将 html 移到其他地方:

代码块#3

$('.some_div').html($('.hiddendiv').html());

所有复选框都会正确显示，具体取决于设置它们的条件。但选择总是设置在最顶部的位置。

但是...如果我用以下内容结束代码块#2:

代码块#4

alert($('#selid').val());
return;

警报框中的值IS 5。

移动最后两行直到重新分配之后，警报始终显示为 1，并且选择位于最顶部位置。

如果我移动 html(代码块#3)，然后跟进:

$('.hiddendiv').remove();
$('#selid').val(5);

然后就可以正常显示了。

使用更具体的选择器(即 $('.hiddendiv #selid') 和 $('.some_div #selid'))仍然具有相同的结果.

那么什么给出了!？如果我在移动它之前分配值，为什么选择会变回其顶部位置？我确信我以前已经完成过这个确切的过程，而且效果很好。

这个文件也有点奇怪。在同一项目的另一个文件中，我使用 prop('checked', true); 设置复选框，因为替代方案不起作用。但在本例中，情况恰恰相反，只有 attr('checked', true); 有效。

目前，最明显的技巧是在移动后分配值。但这并不理想，我更愿意按照我一直在尝试的方式实现。

预先感谢您提出的任何建议。

Answer 1

使用选项的selected属性

$('#check1').attr('checked', true);
$('#selid option[value=5]').attr('selected',true);
$('.some_div').html($('.hiddendiv').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hiddendiv" style="display:none;">
  <form id="someid">
    <input type="checkbox" id="check1" />
    <input type="checkbox" id="check2" />
    <input type="checkbox" id="check3" />
    <select id="selid">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
   </select>
  </form>
</div>
  <div class="some_div"></div>