Semantic-UI Dynamic Dropdown

19,787

Solution 1

Found it,

I put $('#servicetype').dropdown(); after assigning the values:

$("#programmetype").dropdown({
                onChange: function (val) {
                    if (val == "fertility")
                    {
                        $('#servicetype').dropdown({'set value':'something'});
                        $('#servicetype .menu').html(
                            '<div class="item" data-value="acp">ACP</div>' +
                            '<div class="item" data-value="art">ART</div>'
                            );
                        $('#servicetype').dropdown();
                    };
});

Solution 2

A workaround approach:

function setDinamicOptions(selector, options) {
    var att = "data-dinamic-opt";
    $(selector).find('[' + att + ']').remove();
    var html = $(selector + ' .menu').html();
    for(key in options) {
        html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
    }
    $(selector + ' .menu').html(html);
    $(selector).dropdown();
}
$("#programmetype").dropdown({
    onChange: function (val) {
        if (val == "val1")
            setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
        if (val == "val2")
            setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
        if (val == "val3")
            setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
    }
});

Try this.

Share:
19,787

Related videos on Youtube

Nerdar
Author by

Nerdar

Life is precious because we know that one day we will die. I love you Cherrian.

Updated on June 04, 2022

Comments

  • Nerdar
    Nerdar almost 2 years

    Got a problem with semantic-ui dropdown.
    I've been using Semantic-Ui, and wanted to change the dropdown item dynamically. That is, when i choose the value from the first dropdown, the second dropdown's item will change. But the thing is, when the items are changed, the second dropdown cannot be chose, the value won't change. The dropdown won't collapse back.

    The HTML
    The First Dropdown

    <div id="programmetype" class="ui fluid selection dropdown">
        <input type="hidden" name="programmetype">
        <div class="text">Choose..</div>
        <i class="dropdown icon"></i>
        <div class="menu">
           <div class="item" data-value="val1">Car</div>
           <div class="item" data-value="val2">Tank</div>
           <div class="item" data-value="val3">Plane</div>
        </div>
    </div>
    

    Second Dropdown

    <div id="servicetype" class="ui fluid selection dropdown">
        <input type="hidden" name="servicetype">
        <div class="text">Choose..</div>
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item" data-value="select">Choose..</div>
        </div>
    </div>
    

    ..........................
    The jQuery

    $("#programmetype").dropdown({
                onChange: function (val) {
                    if (val == "val1")
                    {
                        $('#servicetype .menu').html(
                            '<div class="item" data-value="val1">Saloon</div>' +
                            '<div class="item" data-value="val2">Truck</div>'
                            );
                    };
    
                    if (val == "val2")
                    {
                        $('#servicetype .menu').html(
                            '<div class="item" data-value="val1">Abraham</div>' +
                            '<div class="item" data-value="val2">Leopard</div>' +
                            );
                    };
    
                    if (val == "val3")
                    {
                        $('#servicetype .menu').html(
                            '<div class="item" data-value="val1">Jet</div>' +
                            '<div class="item" data-value="val2">Bomber</div>' +
                            );
                    };
                }
            });
    
  • Gili
    Gili over 9 years
    Unfortunately, this overwrites the previous component state, which means you lose any stored "defaults". I filed a bug report: github.com/Semantic-Org/Semantic-UI/issues/953
  • Aram Kocharyan
    Aram Kocharyan about 9 years
    Also note that this causes all internal event handlers to be added again - so a 'change' event will be triggered twice. For me, this was undesirable.
  • Aram Kocharyan
    Aram Kocharyan about 9 years
    Note: as mentioned in the above issue, as of v.1.0 the correct approach is $('.ui.dropdown').dropdown('refresh');