Skip to content

[dropdown] Hidden items #2303

Description

@jamessampford

Feature Request

There may be a need to potentially have hidden dropdown items so a dropdown can be dynamically changed depending on other selections. Yes, the dropdown could be completely be re-generated by using setup menu or change values or even making API calls, however, this could add additional code that could easily be removed if a simple hidden class was added to each item (and potentially also looking for display: none ; especially if generated from a select HTML field so can be dynamically added but hidden)

This can then allow a developer to change the menu items by looking at other classes that may be in place when the page is generated

One example use case would be a country and province/state selection dropdown. When the country is changed, you will only want to show provinces/states that belong to that country. Using scripts/APIs would be a lot more effort than say looking at an attribute on the item and decide whether it should be hidden or not, ie. the below could simply be used which is much more easier/tidier:

$('.ui.dropdown.country').dropdown({
  onChange: function(value, text, $choice){
    $('.ui.dropdown.state').dropdown('clear');
    $('.ui.dropdown.state .item').addClass('hidden');
    $('.ui.dropdown.state .item[data-country="' + value + '"]').removeClass('hidden');
  }
});

forceSelection would also need to take into account hidden items so they are not selected when set to true as currently if hidden using display: none it will be selected
https://jsfiddle.net/e7gfh19r/2/

Metadata

Metadata

Assignees

No one assigned

    Labels

    type/featAny feature requests or improvements

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions