Reset Semantic UI Dropdowns Firing onChange Callback/Event-handler

Question

I'm using the Semantic UI Dropdown and I have a bit of trouble with resetting the dropdown back to the page-load state. Basically resetting the selection.

I tried 2 different approaches but both don't really give me what I'm looking for (I also have 2 different types of dropdowns - the plain old selection type and the searchable type where it filters out the options based on what you type in the input).

Approaches

1. $(".ui.dropdown").dropdown("restore defaults");
2. $(".ui.dropdown").dropdown("clear");

A common problem I get from either approach is that it fires the onChange callback/event-handler of the dropdowns - where I make an AJAX call. I would like to reset the dropdowns without invoking the onChange callback/event-handler.

Another problem that is common from either approach is that for dropdowns where I can search for an option - if I search for something that doesn't exist in the options and get a No results found. and click on that option then afterwards initiate either approaches it won't clear it. The search text just stays there and the options remain filtered.

A specific problem I experience when using "clear" is that for dropdowns where you can't search (the basic selection type) it literally clears it and so nothing is selected even though the dropdown defaults to the first option.

---

Here is a Fiddle I prepared for you to see my problem.

HTML

<select name="firstname" class="search ui dropdown">
  <option value="">Firstname</option>
  <option value="1">Ahmed</option>
  <option value="2">Brodie</option>
  <option value="3">Cameron</option>
  <option value="4">Doug</option>
  <option value="5">Ely</option>
  <option value="6">Fionna</option>
</select>

<select name="gender" class="no-search ui dropdown">
  <option value="0">Male</option>
  <option value="1">Female</option>
</select>

<button>
  <span>Reset</span>
</button>

Jquery

$(document).ready(function() {
    $(".search.ui.dropdown").dropdown({
    allowAdditions: false,
    fullTextSearch: true,
    sortSelect: true,
    onChange: function(value, text, choice) {
        alert("FIRST NAME - on change event fired - Run some AJAX.");
    }
  });

  $(".no-search.ui.dropdown").dropdown({
    allowAdditions: false,
    sortSelect: true,
    onChange: function(value, text, choice) {
        alert("GENDER - on change event fired - Run some AJAX.");
    }
  });

  $("button").click(function() {
    // $(".ui.dropdown").dropdown("clear");
    $(".ui.dropdown").dropdown("restore defaults");
  });
});

Answer 1

Try using a more verbose and structured html with hidden inputs instead of oldschool selects:

  <div class="no-search ui selection dropdown">
    <input type="hidden" name="gender" />
    <div class="text">Male</div>  <!-- Selection by default -->
    <div class="menu">
      <div class="active item" data-value="0" data-text="Male">
        Male
      </div>
      <div class="item" data-value="1" data-text="Female">
        Female
      </div>
    </div>
    <i class="dropdown icon"></i>
  </div>

Note that you may specify a default selection with <div class="text">, or a placeholder - with <div class="default text">.

See this fiddle for a complete example.

As for ajax calls, you may check if you have some value in onChange handler - it will be null on 'restore defaults':

onChange: function(value, text, choice) {
  if (typeof value !== "undefined") {
    // ajax call
  }
}