为什么在复制html后，我的select重置自身的值？

Question

我在display: none;有一个表单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;

警报框中的值是 5。

将最后两行移动到重新分配之后，将始终使警报显示1，并且select位于最高位置。

如果我移动html（ 代码块＃3 ），然后执行以下操作：

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

然后显示正确。

对于选择器更具体（即$('.hiddendiv #selid')和$('.some_div #selid') ）仍然具有相同的结果。

那有什么！！ 如果我在移动值之前分配了该值，为什么它又变回其顶部位置？ 我敢肯定，我之前已经做过这个确切的过程，并且一切正常。

这个文件也有点奇怪。 在同一项目的另一个文件中，我使用prop('checked', true);设置复选框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>