Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Initialize Select options via Javascript

Torroni pro asked 1 year ago


Expected behavior It would be convenient to be able to create a Select via Javascript

Actual behavior Looking at the source code, it seems that the constructor retrieves the list of options to be rendered by iterating over the child nodes of the select DOM element. If my interpretation is correct, it means that the list of options can only be provided explicitly in the html markup, but not as an argument to the constructor. Is there a way to fully initialize a Select via Javascript, by providing also the list of options to some method? Or a way to modify the list of options after a Select has been created?

Resources (screenshots, code snippets etc.)


Torroni pro commented 1 year ago

In case it is not clear, by options I mean the choices presented by the drop-down menu of the Select control, not the mdb options used to configure the behavior of the control


Mateusz Lazaru staff answered 1 year ago


Hi,

There is no method which would allow to add or delete existing options, but it's quite simple to do it manually. All you need to do is:

  1. dispose() mdb.Select
  2. append new options to the original select (HTML DOM Element)
  3. re-init instance of the mdb.Select

I've also prepared live demo for you:https://mdbootstrap.com/snippets/standard/mlazaru/5014443


Torroni pro commented 1 year ago

Ok, thanks for the suggestion.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: laptop
  • Browser: Brave Browser Version 1.48.167 Chromium: 110.0.5481.104 (Official Build) (64-bit)
  • OS: Windows 10 Enterprise 22H2
  • Provided sample code: No
  • Provided link: No