Deselect All Options in Multiple Select With 1 Option

Deselect all options in Multiple Select with 1 option

Instead of a separate onclick="" for each option, try an onchange="" on the select:

document.getElementById("bar").onchange=function(){
    if(this.options.selectedIndex > 0){
        /* deselect this.options[0] */
    }else{
        /* deselect this.options[1-n] */
    }
}

and in the HTML:

<select id="bar">
    <option>ALL</option>
    <option>option 1</option>
    <option>option 2</option>
    ...
    <option>option n</option>
</select>

Deselect selected options in select menu with multiple and optgroups

The following function should loop through all the options and unselect them.

HTML

<a href="#" onclick="clearSelected();">clear</a>

JAVASCRIPT

 function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

EDIT:

I don't endorse putting the event handler directly on the element. If you have the option, give the element some type of id/name and bind the event handler in your JavaScript code.

EXAMPLE

Multiple select, when one certain option is selected, unselect other options

The below seems to achieve what you state above. It does also stop you selecting the options if 296 is already selected as well.

const unselect = '296'
$('#select').change(function() {  const $el = $(this)  console.log($el.val())  if ($el.val().indexOf(unselect) !== -1) {    $el.children('option').each(function() {      $opt = $(this)      if ($opt.val() !== unselect) {        $opt.prop('selected', false)      }    });  }})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="select" name="adrestype_id" class="form-control" required="required" multiple="multiple">                            <option value="296">Primairadres </option>                            <option value="297">Bezoekadres </option>                            <option value="298">Factuuradres </option>                            <option value="299">Postadres </option>        </select>

jQuery Multiple Select - Select/deselect items with "ALL"

Please try this

var is_all_selected_state = true; //Initially 'ALL' has been selected$('#carsDropDown').change(function(){  var selected_values_array = $(this).val();   var is_all_option_selected_now = false;  if(selected_values_array.length >= ($('#carsDropDown option').length - 1))  { //If all the option or except one option selceted then this case should be consider as 'ALL' option    is_all_selected_state = false;    is_all_option_selected_now = true;  }  else  { // Get the ALL option selected state    is_all_option_selected_now = $('#carsDropDown option[value=ALL]').prop('selected');  }  if(is_all_option_selected_now)  { // If all selected    if(selected_values_array.length > 1)    { // Check whether more than one value selected along with ALL or not      if(!is_all_selected_state)      {         // Currently selected option as 'ALL'. So remove the rest of the option selected attribute except 'ALL'        $('#carsDropDown option[value!=ALL]').prop('selected',false);        $('#carsDropDown option[value=ALL]').prop('selected', true);        is_all_selected_state = true;      }      else      { // Currently selected option as other than 'ALL'. Then remove the ALL option selected attribute        $('#carsDropDown option[value=ALL]').prop('selected', false);        is_all_selected_state = false;      }    }    else    {      is_all_selected_state = true; //Only ALL option selected    }  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="carsDropDown" multiple="multiple">    <option name="carCode" selected="selected" value="ALL">All Cars</option>    <option value="AUD" name="carCode">Audi</option>      <option value="BMW" name="carCode">BMW</option>      <option value="FOR" name="carCode">Ford</option>    <option value="SAB" name="carCode">Saab</option>    <option value="VOL" name="carCode">Volvo</option>                                                        </select>

Angular deselect all options in multiple select

You should use [(ngModel)] so you can control the value. Note that its multiple select, so you should use array, not just scalar value.

usersSelected = [];

myMethod(): void {
  this.usersSelected = [];
}

And in your template:

<select multiple [(ngModel)]="usersSelected">
  <option *ngFor="let user of users" [ngValue]="user.id">{{user.name}}</option>
</select>

Working example: https://stackblitz.com/edit/angular-c9y1jm

How to deselect the selected option in multiple select using jQuery

You can use $("select option[value='"+id+"']").prop("selected", false);

It will deselect option which has value set as id

$('body').on('click',".removeskill", function(){
        var id = $(this).data("id");
        $(this).remove(); // to remove that item from list
        $('#skills :selected').each(function(i, selected){
           if($(this).val() == id){
             $("select option[value='"+id+"']").prop("selected", false); // to deselect that option from selectbox
           }
        });
});

Try: https://jsfiddle.net/p1Lu83a2/

How can I unselect an option from a multi select on a click ONLY if it is selected

Could be a workaround:

SEE DEMO

$('select option').on('mousedown', function (e) {
    this.selected = !this.selected;
    e.preventDefault();
});

EDIT: this doesn't work on IE (version???). For cross browser solution, even uggly, try that instead: https://stackoverflow.com/a/21797607/1414562

Deselect All Options in Multiple Select With 1 Option