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({})

Papacy

Answer 1

Try this :

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

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

Leroi

Note, that you must also add option with blank value by default: <select class="ui dropdown"> <option value="">Your placeholder</option> </select>. And after that: $('select.dropdown').dropdown(); – Supplemental

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.

Bergquist

Answer 3

You should know that .dropdown() in Semantic UI removes any null value from your select by default.

Nevertheless, there are some approaches to what you are looking for.

Check this fiddle.

Tomika

Forgot to say it's a bug. – Tomika

Answer 4

You can achieve this with the snippet below.

 <div class="ui selection dropdown">
    <input name="gender" type="hidden" value="default">
    <i class="dropdown icon"></i>
    <div class="text">Default Value</div>
    <div class="menu">
        <div class="item" data-value="default">Default Value</div>
        <div class="item" data-value="0">Value</div>
        <div class="item" data-value="1">Another Value</div>
    </div>
 </div>

You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.

If you wanna pass this value to back-end, keep in mind that the selected value is in the input.

Pasha

clearable only works in Semantic UI > 2.4 – Frequently

Answer 5

$('.ui.dropdown').dropdown({
  clearable: true
});

Kra

Welcome to StackOverflow! Please edit your post to include a description of your code any why it works. This will make your answer more useful and more likely to be upvoted :) – Clench