Retrieving value from with multiple option in React Asked Feb 20 '15 at 08:43 Active Aug 13 '22 at 22:18 Viewed 1.7e+01k times 109 0 The React way to set which option is selected for a select box, is to set a special value prop on the <select> itself, corresponding to the value attribute on the <option> element you desire to be selected. For a multiple select this prop can accept an array instead. Now because this is a special attribute, I'm wondering what the canonical way is to retrieve the selected options in the same array-of-option-values-structure when the user changes things (so I can pass it through a callback to a parent component etc), since presumably the same value property won't be available on the DOM element. To use an example, with a text field you would do something like this (JSX): var TextComponent = React.createClass({ handleChange: function(e) { var newText = e.target.value; this.props.someCallbackFromParent(newText); }, render: function() { return <input type="text" value={this.props.someText} onChange={this.handleChange} />; } }); What is the equivalent to replace ??? for this multiple select component? var MultiSelectComponent = React.createClass({ handleChange: function(e) { var newArrayOfSelectedOptionValues = ???; this.props.someCallbackFromParent(newArrayOfSelectedOptionValues); }, render: function() { return ( <select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}> <option value={1}>First option</option> <option value={2}>Second option</option> <option value={3}>Third option</option> </select> ); } }); javascript dom reactjs edited Oct 25 '20 at 21:18 Inkling asked Feb 20 '15 at 08:43 Inkling 3,544 4 30 44 11 Answers11 124 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); } edited Feb 25 '15 at 17:00 Jonny Buchanan answered Feb 20 '15 at 09:23 Jonny Buchanan 61,926 17 143 150 Thanks. I thought there might be a shortcut rather than having to iterate manually. The closest thing I found was the `selectedOptions` property, but it doesn't work on a lot of older browsers. – Inkling Feb 22 '15 at 22:26 typo on 6th line, should be `value.push(options[i].value)` – awsum Feb 25 '15 at 11:52 4 CoffeeScript version: `(option.value for option in e.target.options when option.selected)` – 1j01 Jul 01 '15 at 13:33 72 ES6 version: [...event.target.options].filter(o => o.selected).map(o => o.value) – svachalek Aug 14 '15 at 22:21 lodash version: \_.pluck(_.filter(e.target.options, 'selected'), 'value') – Denis Nov 11 '15 at 20:21 underscorejs version: _.map(_.filter(e.target.options, function(item){ return item.selected }), function(item){return item.value}) – Mar 10 '16 at 18:11 1 destructure the params to make that es6 version even nicer... `handleChange: ({ target: { options }}) => [...options].filter` – Charlie Martin Jun 21 '16 at 19:12 4 You can also destructure the ES6 arrows: `[...e.target.options].filter(({selected}) => selected).map(({value}) => value)` – Mathieu M-Gosselin Sep 27 '16 at 14:33 This information should be part of React documentation. – Alex Mar 14 '17 at 16:32 1 TypeScript version: Array.from(e.target.options).filter(o => o.selected).map(o => o.value) – hipertracker Dec 28 '17 at 04:04 7 RE: ES6 version, while that _looks_ right it doesn't work. `event.target.options` is an `HTMLOptionsCollection`, not an Array. – TrueWill Aug 08 '18 at 17:35 1 You can use event.target.selectedOptions. It will provide directly selected options. – jasmin_makasana Mar 25 '19 at 06:56 @TrueWill I'm sure you figured it out by now, but fyi for anyone else the spread operator can actually be applied to any iterable object. So it should work fine in this case. – zrisher Jun 26 '19 at 23:44 3 @zrisher Negative, Ghost Rider. `HTMLOptionsCollection` is not iterable. However, `Array.from` still works with it: `Array.from(event.target.options).filter(o => o.selected).map(o => o.value)` – Bondolin Jul 16 '19 at 21:42 I think rather running *filter and map* it is good to run only one iteration. – Umair Ahmed Aug 06 '19 at 11:43 1 @UmairAhmed It would never, ever be an issue (performance-wise) for any ``. If iterating "2N" is causing performance issues, then you shouldn't be using a `` in the first place to hold all of those values. While it's important to think about performance, style is readability and I'll take the `.filter().map()` any day over a standard `for` loop. Just my two cents! – Josh M. Jun 07 '20 at 02:18

Answer 1

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

Answer 2

Easiest way...

handleChange(evt) {
  this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); 
}

Answer 3

You can actually find the selectedOptions inside the target... no need to iterate over all the options. Let's imagine you want to send the values to an onChange function passed to your component as props: you can use the following function on the onChange of your multiple select.

onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map(opt => opt.value);
    this.props.onChange(values);
  };

Answer 4

In case you want to use ref you can get selected values like this:

var select = React.findDOMNode(this.refs.selectRef); 
var values = [].filter.call(select.options, function (o) {
      return o.selected;
    }).map(function (o) {
      return o.value;
    });

2018 ES6 update

  let select = this.refs.selectRef;
  let values = [].filter.call(select.options, o => o.selected).map(o => o.value);

Answer 5

In the case you would like to keep track of the selected options while the form is being completed:

handleChange(e) {
    // assuming you initialized the default state to hold selected values
    this.setState({
        selected:[].slice.call(e.target.selectedOptions).map(o => {
            return o.value;
        });
    });
}

selectedOptions is an array-like collection/list of elements related to the DOM. You get access to it in the event target object when selecting option values. Array.prototype.sliceand call allows us to create a copy of it for the new state. You could also access the values this way using a ref (in case you aren't capturing the event), which was another answer for the question.

Answer 6

The following worked for me

var selectBoxObj = React.findDOMNode(this.refs.selectBox)
var values = $(selectBoxObj).val()

Answer 7

Another way to do it:

handleChange({ target }) {
    this.props.someCallback(
       Array.prototype.slice.call(target.selectedOptions).map(o => o.value)
    )
}

Answer 8

After spending a lot of time with this topic, and seeing that we are now all using mostly hooks and newbies may have never even dealt with classes in reactjs. I decided to update this answer so that people can easily deal with using vanilla javascript and ES6. I am also including a link to codesandbox so that people can play with the code and modify it to their application.

Here is the code, it has excessive console logs so that people can figure out what is doing what in the code and how it is doing it.

import "./styles.css"
import {useRef} from 'react'


export default function App() {

  const handleSubmit = async(e) => {
    e.preventDefault()
    let selected = [...recipeRef.current.options]
                .filter(option => option.selected)
                .map(option => option.value)
    console.log(new Date(), ' recipeType: ', selected)
    console.log(new Date(), 'with ref: ', [...recipeRef.current.options]);
    [...recipeRef.current.options].map(option => console.log(option,'; ',option.selected))
    console.log([...recipeRef.current.options].filter(option => option.selected))
    console.log([...recipeRef.current.options].filter(option=>option.selected).map(option => option.value))
  }
  const recipeRef = useRef()

  return (
    <div className="App">
      <h1>Hello CodeSandbox example for select Multiple by Julio Spinelli</h1>
      <form onSubmit={handleSubmit}>
          <div className="mb-6">
              <label htmlFor="text" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Name of the Recipe</label>
              <input type="text" id="text" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required ></input>
          </div>
          <div className="mb-6">
              <label htmlFor="recipeType" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Recipe Type</label>
              {/* <input type="text" id="text" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required onChange={(e)=>{setRecipeType(e.target.value)}} value={recipeType}></input> */}
              <select name="recipeType" id="recipeType" ref={recipeRef} multiple={true} size={3}> {/* Step 2 - Add the reference to `select` element */}
                <option value="unselected">unselected</option>
                <option value="Grill">Grill</option>
                <option value="Steak">Steak</option>
                <option value="Pizza">Pizza</option>
              </select>
          </div>
          <div className="flex items-start mb-6">
              <div className="flex items-center h-5">
              <input id="remember" aria-describedby="remember" type="checkbox" className="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" ></input>
              </div>
              <div className="ml-3 text-sm">
              <label htmlFor="remember" className="font-medium text-gray-900 dark:text-gray-300">Recipe uploaded?</label>
              </div>
          </div>
          <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save</button>
      </form>
    </div>
  )
}

Answer 9

Using event object:

handleChange(e) {
    let selectedOptions = e.target.selectedOptions

    // selectedOptions looks like this:
    // {
    //      '0': <1st selected HTMLOptionElement>,
    //      '1': <2nd selected HTMLOptionElement>,
    //      '2': <3rd selected HTMLOptionElement>
    // }

    let newArrayOfSelectedOptionValues = Object.values(selectedOptions).map(
        opt => opt.value
    )

    this.props.someCallbackFromParent(newArrayOfSelectedOptionValues);
}

So the full ??? looks like this:

Object.values(e.target.selectedOptions).map( opt => opt.value )

Answer 10

Try this one:

dropdownChanged = (event) => {
    let obj = JSON.parse(event.target.value);
    this.setState(
        {
            key: obj.key,
            selectedName: obj.name,
            type: obj.type
        });
}


<select onChange={this.dropdownChanged} >
<option value={JSON.stringify({ name: 'name', key: 'key', type: "ALL" })} >All Projetcs and Spaces</option></select>