Chrome 表单重置不更改显示选择元素
Posted
技术标签:
【中文标题】Chrome 表单重置不更改显示选择元素【英文标题】：Chrome form reset don't change display select element 【发布时间】：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 位）。所以这听起来像是一个错误。 【参考方案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 浏览器。感谢您的理解。以上是关于Chrome 表单重置不更改显示选择元素的主要内容，如果未能解决你的问题，请参考以下文章