Get options from multiple options in React
I am trying to get a list of selected options from the following form in React.
<form onSubmit={ this.handleOptionsSelected.bind(this) }>
<div>
<select multiple>
{ this.getOptionList() }
</select>
</div>
<input type="submit" value="Select"/>
</form>
Here is my implementation handleOptionsSelected
.
handleOptionsSelected(event) {
event.preventDefault();
console.log("The selected options are " + event.target.value);
}
However, I got the value undefined
for event.target.value
.
Does anyone know how to fix the code above?
+3
source to share
1 answer
You can add ref to yours <select ref={node => this.select = node} multiple>
and iterate over the values.
Something like that.
class Example extends React.Component{
handleOptionsSelected(event){
event.preventDefault();
const selected = [];
for(let option of this.select.options){
if(option.selected){
selected.push(option.value)
}
}
console.log(selected);
}
render() {
return (
<form onSubmit={ this.handleOptionsSelected.bind(this) }>
<div>
<select ref={node => this.select = node} multiple="true">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<input type="submit" value="Select"/>
</form>
)
}
}
ReactDOM.render(
<Example name="World" />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
+1
source to share