jQuery load事件后select控件值未重置的问题排查

当将select的值改为例如5，点击按钮重新加载HTML select后，即便HTML代码中设置了selected="selected"，select显示的值却没有重置，请问这是为什么？

复现代码 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <select id="select" name="quantity">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
<button>Load</button>

JavaScript代码

(function($) {
  $(document).ready(function() {
    $('button').click(function() {
      let select = $('#select');

      console.log(`Value before: ${select.val()}`);

      $('#wrapper').load(window.location.href + " #wrapper", function() {
        let select = $('#select');

        console.log(`Value after: ${select.val()}`);
      });
    });
  });
})(jQuery);

原因分析 #

这是浏览器的表单状态记忆功能导致的。浏览器会自动保存用户对表单控件的选择状态，哪怕你通过AJAX重新加载了DOM结构，浏览器依然会优先恢复用户之前选择的值，而不是严格遵循HTML里的selected属性设置。

另外，jQuery的load()方法加载完新内容后，浏览器的原生行为会自动恢复表单控件的历史状态——这是浏览器为了避免用户重复操作、提升体验的设计，但恰好导致了预设的选中值不生效。

解决方案 #

1. 加载完成后手动设置选中值

在load()的回调函数里，主动指定select的选中值，覆盖浏览器的记忆：

$('#wrapper').load(window.location.href + " #wrapper", function() {
  let select = $('#select');
  select.val('2'); // 手动设置默认选中的value值
  console.log(`Value after: ${select.val()}`);
});

2. 禁用浏览器自动填充

给select标签添加autocomplete="off"属性，让浏览器不再记忆该控件的状态：

<select id="select" name="quantity" autocomplete="off">
  <option value="1">1</option>
  <option value="2" selected="selected">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

3. 重置表单（适合多控件场景）

如果select在表单内，或者需要重置多个控件，可以直接调用表单的reset()方法，恢复到HTML预设的初始状态：

$('#wrapper').load(window.location.href + " #wrapper", function() {
  // 假设select所在的表单在wrapper内，直接查找并重置
  $('#wrapper form')[0].reset();
});

内容的提问来源于stack exchange，提问作者Mr. Jo