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)
})
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