Targeting specific instance of select element

Topic: Targeting specific instance of select element

Sushrut Bidwai premium asked 1 year ago

Hi,

I have two instances of select elements. One to show department, one to show locations. I want department options to have a scrollbar as fewer than 20 departments exist. For locations, as there can be thousands, I want to restrict the view to the top 10 locations, but leave the rest of the options hidden, but searchable. I can accomplish requirements for location select by modifying css class .select-options-wrapper { overflow-y: hidden !important;} along with setting visibleOptions.

My question is - how can I apply this style change to only location select box.

Add comment

Sushrut Bidwai premium answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

Thanks, but visibleOptions does not keep options hidden. Here are my requirements. 1. Total number of options ~ can be hundreds. 2. I want to show 8-10 of top options visible, other options should not be visible. 3. I use filter=true. So when user types in the search box, rest of the options are useful.

I can accomplish most of this using standard API. Problem is if I set hidden=true on an option, then it is not used in search either. Is there a setting where hidden options can be included in search and their visibility turned on if they are being searched?

Mateusz Lazaru staff commented 1 year ago

let's continue discussion there: https://mdbootstrap.com/support/standard/including-hidden-options-in-search-results-on-a-select/

Add comment

Mateusz Lazaru staff answered 1 year ago