Topic: Targeting specific instance of select element

Sushrut Bidwai premium asked 1 year 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 1 year 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 1 year ago

let's continue discussion there:

Mateusz Lazaru staff answered 1 year 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

  • ForumUser: 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