Fomantic-UI
Fomantic-UI copied to clipboard
[dropdown] Hidden items
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/
Yes, this would indeed be useful. I currently remember all select options on init and then reset them using a custom script when filtering.