Topic: Select option with data attribute

meesha81 priority asked 3 months ago


How to get data-var="xxx" of selected option?

It looks that optionSelected.mdb.select do not provide data attributes from original option.

Or is possible to get it in the optionSelected.mdb.select event? Standard select do this.


Grzegorz Bujański free answered 2 months ago


At the moment, we have no plans to add information about the dataset of the selected item to our events.

You can do this easily using the returned value in the event:

<select id="select" data-mdb-select-init>
  <option data-var="var1" value="1">One</option>
  <option data-var="var2" value="2">Two</option>
  <option data-var="var3" value="3">Three</option>
  <option data-var="var4" value="4">Four</option>
</select>

const selectEl = document.querySelector('#select')
selectEl.addEventListener('optionSelected.mdb.select', (e) => {
  const selectedOptionEl = selectEl.querySelector(`option[value="${e.value}"]`)
  console.log(selectedOptionEl.dataset.var)
})

meesha81 priority commented 3 weeks ago

I understand this, but it's a bit complicated when on your side it's very easy to take data-* from original option element and put it in "your" option element. It would be nice if you can spend one hour of time to add this feature.


meesha81 priority answered 2 months ago


Hi, It is very important for me that we need to access also data attributes. It shouldn't be that difficult to pass data attributes, don't you think?


Kamila Pieńkowska staff answered 3 months ago


The optionSelected event return only value of the selected option.



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 8.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Win11
  • Provided sample code: No
  • Provided link: No