dropdown clear doesn't work in callback

dropdown clear doesn't work in callback

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<p style='color:red;'>
Select "N/A "and all other values appear to be removed from the dropdown, using dropdown 'clear'.
<br><br>
However, if you inspect the hidden dropdown input (using firebug) all values are still there. Same with dropdown 'remove selected'. 
</p>

<form class="ui form">
  <div class="field">
    <label for="test">Seasons</label>
    <div class='ui multiple search selection dropdown seasons'>
      <input name="seasons" id="seasons" value="winter,spring,summer" type="hidden">
      <i class="dropdown icon"></i>
      <div class="default text">Select</div>
      <div class="menu">
        <div class="item" data-value="winter">Winter</div>
        <div class="item" data-value="spring">Spring</div>
        <div class="item" data-value="summer">Summer</div>
        <div class="item" data-value="N/A">N/A</div>
      </div>
    </div>
  </div>
</form>

CSS

body {
  margin : 20px;
}

JavaScript

$('.ui.dropdown.seasons').dropdown({ 

   onAdd : function (addedValue, addedText, $addedChoice) {
  	 var $addedValue = addedValue.toLowerCase();  
	   console.log('add');
	   if ($addedValue === 'n/a'){ 
	    $('.ui.dropdown.seasons').dropdown('clear');
	   }else{
	    $('.ui.dropdown.seasons').dropdown('remove selected','N/A'); 
	   } 
   }
 });