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.