Retrieving value from <select> with multiple option in React
The same way you do anywhere else, since you're working with the real DOM node as the target of the change event:
handleChange: function(e) {
var options = e.target.options;
var value = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
value.push(options[i].value);
}
}
this.props.someCallback(value);
}
With Array.from()
and e.target.selectedOptions
you can perform a controlled select-multiple:
handleChange = (e) => {
let value = Array.from(e.target.selectedOptions, option => option.value);
this.setState({values: value});
}
target.selectedOptions return a HTMLCollection
https://codepen.io/papawa/pen/XExeZY
Easiest way...
handleChange(evt) {
this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)});
}