<select class="mdb-select md-form" multiple id="ddMulti"

        onChange="UpdateDDLabels();">

  <option value="" disabled selected>Choose your option</option>

  <option value="1" selected="selected">Option 1</option>

  <option value="2" selected="selected">Option 2</option>

  <option value="3">Option 3</option>

</select>

<label class="mdb-main-label">Example label</label>

<a href="#" onclick="UnselectOption0();" >Click me to unselect Option 1!</a>

<br/>

How many are selected?: <span id="lblHowManyAreSelected">2</span>

<br/>

Which ones are selected?: <span id="lblWhichAreSelected">Option 1, Option 2</span>

​

​

<H2 class="mt-5">

  Basic Non-MDBversion of this functionality

</H2>

<br/><br/>

<select class="Xmdb-select Xmd-form" multiple id="ddMultiBasic"

        onChange="UpdateDDLabelsBasic();">

  <option value="" disabled selected>Choose your option</option>

  <option value="1" selected="selected">Option 1</option>

  <option value="2" selected="selected">Option 2</option>

  <option value="3">Option 3</option>

</select>

​

<a class="d-block mt-5 href="#" onclick="UnselectOptionBasic0();" >Click me to unselect Option A!</a>

<br/>

How many are selected?: <span id="lblHowManyAreSelectedBasic">2</span>

<br/>

Which ones are selected?: <span id="lblWhichAreSelectedBasic">Option 1, Option 2</span>

​

// Material Select Initialization

$(document).ready(function() {

$('.mdb-select').materialSelect();

});

​

function UnselectOption0() {

  $("#ddMulti").find("option:not([disabled]):selected:first").prop("selected",false);

  $(".mdb-select li")[2].click()

  $(".mdb-select input").val($("#ddMulti").find("option:not([disabled]):selected").text());

  UpdateDDLabels();

}

function UpdateDDLabels(){

  $("#lblHowManyAreSelected").text($("#ddMulti").find("option:not([disabled]):selected").length);

  $("#lblWhichAreSelected").text($("#ddMulti").find("option:not([disabled]):selected").text());

}

​

​

function UnselectOptionBasic0() {

  $("#ddMultiBasic").find("option:not([disabled]):selected:first").prop("selected",false);

  UpdateDDLabelsBasic();

}

function UpdateDDLabelsBasic(){

  $("#lblHowManyAreSelectedBasic").text($("#ddMultiBasic").find("option:not([disabled]):selected").length);

  $("#lblWhichAreSelectedBasic").text($("#ddMultiBasic").find("option:not([disabled]):selected").text());

}