Topic: Targeting specific instance of select element

Sushrut Bidwai premium asked 11 months ago


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.

Sushrut Bidwai premium answered 11 months ago

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 11 months ago

let's continue discussion there:

Mateusz Lazaru staff answered 11 months ago

I think you should use visibleOptions in select's config instead of manually changing css.

live example:

all options are available here:


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No