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());

根据用于设置它们的条件，所有复选框都会正确显示。但是选择总是设置在最顶层位置。

但是......如果我用以下内容结束 Code Block＃2 ：

代码块＃4

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

警告框中的值 IS 5。

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

如果我移动html（ Code Block＃3 ），然后跟进：

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

然后显示正确。

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

所以给出了什么！？如果在移动之前分配值，为什么选择会更改回其顶部位置？我确信我之前已经完成了这个过程，并且工作正常。

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

目前明显的黑客攻击是在移动后分配值。但这并不理想，我更愿意按照我一直在努力的方式。

提前感谢你提出的任何事情。

Answer 1

使用选项的selected属性

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: