Topic: Select option with data attribute
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.
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?
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 pro premium priority commented 2 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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