React, get data attribute on select option

Question

Is it possible to set data attribute on a select option and if so how I can then get that value onChange

//pseudocode

const getColor = (dcolor) => {
    console.log(dcolor)
}

<select onChange={e => getColor(e.target.attributes.data-color)}>    
    <option value={'red'} data-color={'#FF0000'}>Red</option>
    <option value={'green'} data-color={'#00ff00'}>Green</option>
    <option value={'blue'} data-color={'#0040ff'}>Blue</option>
    <option value={'yellow'} data-color={'#ffff00'}>Yellow</option>
</select>

does this stackoverflow.com/a/43222753/9871756 answer your question — Abdullah Abid
– Abdullah Abid, Commented Jul 26, 2020 at 12:44

nir shabi · Accepted Answer · 2020-07-26 12:32:55Z

2

Not sure if there is anything more simple than that - but you could get the selectedIndex, use that to get the option, and use that to get the color:

onChange=(getColor)

const getColor = (e) => {
    const idx = e.target.selectedIndex;
    const option = e.target.querySelectorAll('option')[idx];
    const color = option.getAttribute('data-color');
    return color    
}

answered Jul 26, 2020 at 12:32

nir shabi

3671 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React, get data attribute on select option

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related