Dropdown clear option semantic-ui

Question

I've encountered a problem when trying to implement 2 dropdowns in semantic-ui.

What I want to happen is that when I change the selected item in the first dropdown the second dropdown will be automatically be cleared from its pervious selection (this is the first step in implementing an automatic change to the content of the second dropdown).

I've created a simpler version containing 2 dropdowns and a clear button in JS bin : here.

The code:

var $one = $('#one'),
    $two = $('#two');

$two.dropdown();
$one.dropdown({
    onChange :function(val) {
        $two.dropdown('clear');
    }
});

$('.button').on('click', function() {
    $('#two').dropdown('clear');  
});

Here I've encountered multiple problems:

The first problem I encountered was that the clear button won't clear both dropdowns unless both dropdowns are only initialised and no other settings added in the initialisation (i.e $(".ui.dropdown").dropdown()).

The second problem is that in the provided code the a dropdown will be cleared (only the second dropdown will be cleared for some reason, and not the first) only if the selector for the clear button will be $(".ui.dropdown) , if I use $("#one")/$("#two") the button won't clear the dropdown.

And the third problem , is that when a change occurs in the first dropdown the second dropdown is not being cleared , which is my ultimate goal.

Any thoughts or suggestions will be greatly appreciated.

Prejudge

Answer 1

$(document).ready(function () {
            $("#super_type").dropdown({
                onChange: function (val) {
                    $('#subtype_list').dropdown('clear');
     });
});

Genera

Please consider adding some description to your answer. – Columella

Answer 2

This is the best and easy solution provided by semantic UI. $('.ui.dropdown').dropdown({ "clearable": true }); By default the value of clearable setting is false.

Talmudist

just want to mention that this is only available since version 2.4 – Vindication

Answer 3

See http://semantic-ui.com/modules/dropdown.html#behavior

$('.your.element').dropdown('set selected', "value");

This worked for me.

Demarche

Answer 4

Using only js/jquery

var elemento = $("idElementoSelect).next().next();
elemento.html('text';)

Antiphony

Answer 5

see http://www.semantic-ui.cn/modules/dropdown.html#/settings

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

Stage