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: Add Class to Select

yorkmyers priority asked 2 years ago


Please reference this snippet

I have a JavaScript function that performs validation on input fields and adds a class accordingly. It works for text input boxes, but it doesn't work for the the "select" dropdown. I think it's because this component gets re-created, and it's inside another wrapper container.

Is it possible to add a class target the new HTML element that wraps this select?

I did see the "validation" in the docs, but the JavaScript for that involved looping over every form element, and a specific class on the FORM itself, which I'd like to avoid.

Thank you


Mateusz Lazaru staff answered 2 years ago


Unfortunately currently there is no way pass class or ID for new created HTML element via atributes. I'll add this feature to our todo list, and it may be added in future.

For now I've prepared two workaround solutions based on your code:

1.Newly created input always has .select-input class, so you can use document.querySelector('.select-input'), or if you use more than one: document.querySelectorAll('.select-input')[index]. This isn't best aproach to be honest, because it reduces code readability.

2.If you add data-mdb-placeholder, it will be passed to new Select element as placeholder attribute. Use it as a selector for new Select element.

Both solutions are in snippet linked below, first one is commented out.

https://mdbootstrap.com/snippets/standard/temp/4221424



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes