Add Class to Select


Topic: Add Class to Select

yorkmyers priority asked 1 week 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


mlazaru staff answered 1 week 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
  • User: 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