选择框多选选项无法在 Microsoft Edge 浏览器上使用 JQuery 清除答案

【问题标题】：Select box multiselect option not able to clear using JQuery on Microsoft edge browser选择框多选选项无法在 Microsoft Edge 浏览器上使用 JQuery 清除
【发布时间】：2018-09-19 19:34:19
【问题描述】：

我正在尝试在 Microsoft Edge 浏览器上使用 JQuery 清除所有选定的选项。

除了 Edge 之外，它工作正常。

在 Edge 上它正在工作，但 Edge 仍显示为选中状态。

如果我将鼠标悬停在选择框上点击全部清除按钮后然后它会取消选择所有选项

下面是我的代码。

HTML

<input type="button" id='clear' value="Clear All"/>


<select id="filter_value_1" style="width:200px;" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

JS代码

$(document).ready(function(){

    $("#clear").click(function(){
    $("#filter_value_1 option:selected").removeAttr("selected");

  });
});

演示

https://jsfiddle.net/c7jk6bpg/4/

【问题讨论】：

尝试使用.prop() 而不是.attr()。
似乎是边缘问题：github.com/SeleniumHQ/selenium/issues/4490
请在标记重复的已接受答案下方具体查看 cmets。它确实提到使用.val([]) 或.prop("selected", false)
@Nope 这也不行
@AlpeshJikadra $("#filter_value_1").val([]); 在 Edge 中不起作用？

标签： javascript jquery microsoft-edge

【解决方案1】：

jQuery focus() 为这个 Edge 错误提供了解决方法。

$(document).ready(function(){
    $("#clear").click(function(){
        $("#filter_value_1 option:selected").removeAttr("selected");
        $("#filter_value_1").focus(); // Edge bug workaround
    });
});

这种方法的一个潜在缺点是键盘用户会“集中”回到选择列表中。通常，按下外部按钮会从选择列表中移除焦点。使用此解决方法，按下“全部清除”按钮会重新激活选择：随后按下“A”会选择选项 A。使用鼠标导航的用户可能永远不会注意到。将“全部清除”作为选择一组更好选择的前奏的键盘用户可能会喜欢重新获得焦点。

【讨论】：