Fomantic-UI icon indicating copy to clipboard operation
Fomantic-UI copied to clipboard

[dropdown] Hidden items

Open jamessampford opened this issue 2 years ago • 1 comments

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/

jamessampford avatar Apr 05 '22 10:04 jamessampford

Yes, this would indeed be useful. I currently remember all select options on init and then reset them using a custom script when filtering.

h0lg avatar Nov 07 '22 13:11 h0lg