Semantic UI: Dropdown default/placeholder value issue

Question

I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.

Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?

HTML Code

<div class="field">
            <label style="width: 250px">Select a Gender</label> <select
                name="skills" class="ui fluid dropdown">
                <option value="">Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
</div>

JavaScript Code

$(".ui.fluid.dropdown").dropdown({})

Answer 1

Try this :

$('select.dropdown').dropdown({placeholder:'Your placeholder'});

see Semantic UI (or Semantic UI CN for a Chinese version) for more info.

Answer 2

In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.

However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.

If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:

$('.ui.fluid.dropdown').dropdown('clear')

Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.