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.

Answer 1

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

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.