Chrome 表单重置不更改显示选择元素答案

【问题标题】：Chrome form reset don't change display select elementChrome 表单重置不更改显示选择元素
【发布时间】：2020-09-20 14:38:00
【问题描述】：

当我重置表单时，选择元素值重置但仍显示旧值

我正在使用它来重置表单

$('#testForm')[0].reset();

在本例中，默认选择“二”选项。如果我更改选择并按“重置表单”，选择值会变回但仍显示旧值

在 Edge 中工作

https://jsfiddle.net/z6vk91sL/

Google Chrome 83.0.4103.61（官方版本）（64 位）（同类群组：稳定版）

$('#testFormReset').on("click", () => {
  $('#testForm')[0].reset();
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='testForm'>
  <select>
    <option value='1'>One</option>
    <option selected value='2'>Two</option>
    <option value='3'>Three</option>
  </select>

  <button id='testFormReset' type='reset'>
    reset form
  </button>
</form>

【问题讨论】：

不，它保持不变。如果我再次打开选择，我会看到选择了“二”，但旧值仍显示在输入中
我可以确认，当我选择三然后单击“重置表单”时，它不会在 Chrome v83.0.4103.61 中切换回二。它确实切换回 Brave，基于稍旧的 Chromium v81.0.4044.138（官方构建）（64 位）。所以这听起来像是一个错误。

标签： jquery forms google-chrome select microsoft-edge

【解决方案1】：

您遇到了issue #1087031，这是五天前报告的，现已修复。该修复程序将在不久之后发布，可能是 v84（它针对 M-84）。

我通过在https://bugs.chromium.org/p/chromium/issues 搜索select reset component:Blink>Forms 发现了该问题。

【讨论】：

谢谢，我会暂时做一个临时修复。

【解决方案2】：

您在 Google Chrome 和 MS Edge 浏览器 中似乎遇到了这个问题，因为这两个浏览器使用相同的浏览器引擎。

由于该问题已在 Chromium 网站上报告并修复。

在这里，我向您分享您可以临时使用的解决方法。

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>
<body>
<form id="testForm">
  <select id="my_select">
    <option value='1'>One</option>
    <option value='2' selected>Two</option>
    <option value='3'>Three</option>
  </select>

  <button id='testFormReset'>
    reset form
  </button>
</form>
<script>
$('#testFormReset').on("click", () => {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });

    $('#testForm')[0].reset();
 
})
</script>
</body>
</html>

MS Edge（左侧）和 Google Chrome 浏览器中的输出：

【讨论】：

它适用于 MS Edge 旧版浏览器，但您可以在 MS Edge Chromium 浏览器中看到类似的问题。上述解决方法适用于 MS Edge Chromium 浏览器和 Google Chrome 浏览器。感谢您的理解。