3

I am trying to clear all selected option using JQuery on Microsoft Edge browser.

Other than Edge it is working fine.

On Edge it is working but still Edge shows as selected.

If I hover on select box after click on Clear All button then it deselect all option

Below is my code.

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 code

$(document).ready(function(){

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

  });
});

Demo

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

Alpesh Jikadra
  • 1,692
  • 3
  • 18
  • 38
  • Try with `.prop()` rather than `.attr()`. – Mitya Apr 10 '18 at 08:52
  • 2
    Seems to be an Edge issue: https://github.com/SeleniumHQ/selenium/issues/4490 – alexP Apr 10 '18 at 08:53
  • Please see the comments specifically below the accepted answer of the marked duplicated. It does mention there to either use `.val([])` or `.prop("selected", false)` – Nope Apr 10 '18 at 08:55
  • @Nope this is also not working – Alpesh Jikadra Apr 10 '18 at 08:57
  • @AlpeshJikadra `$("#filter_value_1").val([]);` didn't work in Edge? – Nope Apr 10 '18 at 09:00
  • I can confirm @alexP comment - tried it on an older version of Edge and it's working but not working on an updated one. – Samuil Petrov Apr 10 '18 at 09:00
  • My version are **Microsoft Edge 41.16299.248.0** and **Microsoft EdgeHTML 16.16299** – Alpesh Jikadra Apr 10 '18 at 09:00
  • @Nope **$("#filter_value_1").val([]);** also not working on edge – Alpesh Jikadra Apr 10 '18 at 09:01
  • @AlpeshJikadra Fair enough, removed duplicate. – Nope Apr 10 '18 at 09:02
  • `for (var i=0; i – myfunkyside Apr 10 '18 at 11:48
  • @myfunkyside this is also not working, behave same as prop('selected', false). – Alpesh Jikadra Apr 10 '18 at 12:13
  • But it doesn't behave same as `$("#filter_value_1 option:selected").prop("selected",false);`. Where that one only iterates over the selected option, my custom for-loop will iterate over every option regardless of whether they're selected. Also it's not using jQuery, that might just do the trick for some reason... If it doesn't work okay, I just hope you tried it and didn't just assume it won't work because it's essentially based on the same function. – myfunkyside Apr 10 '18 at 12:19
  • As a last resort you could try `$("#filter_value_1").trigger("mouseenter")` or `$("#filter_value_1").trigger("mouseover")`. Not the most ideal solution, but if all else fails... – myfunkyside Apr 10 '18 at 12:27
  • @myfunkyside this is also not working, When I manually move cursor then only it gets deselected. – Alpesh Jikadra Apr 10 '18 at 13:05

1 Answers1

1

jQuery focus() provides a workaround for this Edge bug.

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

A potential drawback to this approach is that keyboard users get "focused" back into the select list. Normally, pressing an external button removes focus from the select list. With this workaround, pressing the Clear All button reactivates the select: subsequently pressing "A" selects option A. Users who navigate with the mouse might never notice. A keyboard user who Cleared All as prelude to choosing a better set of selections might appreciate the regained focus.

cheth
  • 11
  • 1