我试图在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/

最佳答案

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。使用鼠标导航的用户可能永远不会注意到。清除全部作为选择更好的选择集的前奏的键盘用户可能会重新获得关注。

09-11 19:12
查看更多