Retrieving value from <select> with multiple option in React

Question

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

Jonny Buchanan · Accepted Answer · 2015-02-25 17:00:08Z

127

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, 2015 at 17:00

answered Feb 20, 2015 at 9:23

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

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

17 Comments

1j01 Over a year ago

CoffeeScript version: (option.value for option in e.target.options when option.selected)

svachalek Over a year ago

ES6 version: [...event.target.options].filter(o => o.selected).map(o => o.value)

Mathieu M-Gosselin Over a year ago

You can also destructure the ES6 arrows: [...e.target.options].filter(({selected}) => selected).map(({value}) => value)

TrueWill Over a year ago

RE: ES6 version, while that looks right it doesn't work. event.target.options is an HTMLOptionsCollection, not an Array.

Bondolin Over a year ago

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

|

Mendes · Accepted Answer · 2018-04-06 02:09:39Z

86

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

edited Apr 6, 2018 at 2:09

answered Apr 6, 2018 at 2:01

Mendes

1,08210 silver badges12 bronze badges

2 Comments

Janosh Over a year ago

Any ideas on how to combine the selected options from multiple selects into one array? Say after grabbing them all via document.querySelectorAll('select')?

Inkling Over a year ago

Note that at the time this question was asked, selectedOptions didn't have good compatibility, and is still not supported by IE. This would be the modern way to do it though.

jamesmfriedman · Accepted Answer · 2017-12-19 20:26:57Z

19

Easiest way...

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

answered Dec 19, 2017 at 20:26

jamesmfriedman

6536 silver badges6 bronze badges

2 Comments

Ziggy Over a year ago

This is nice, but HTMLCollectionOf<HTMLOptionElement> is not an array... Apparently Array.from works though. stackoverflow.com/a/49684109/29182

Julio Spinelli Over a year ago

selectedOptions is no longer a property of target in Chrome Version 99.0.4844.51 (Official Build) (64-bit)

Ru Chern Chong · Accepted Answer · 2019-03-08 15:07:21Z

13

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

edited Mar 8, 2019 at 15:07

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

answered Mar 8, 2019 at 14:49

Lanci

5505 silver badges8 bronze badges

2 Comments

Inkling Over a year ago

At the time this question was asked, selectedOptions didn't have good compatibility. It's still not supported by Internet Explorer, so not really usable if you want IE support (at least without a polyfill).

Julio Spinelli Over a year ago

selectedOptions Property is not available in Chrome Version 99.0.4844.51 (Official Build) (64-bit)

Deano · Accepted Answer · 2018-07-06 17:18:24Z

12

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

edited Jul 6, 2018 at 17:18

Deano

12.3k20 gold badges77 silver badges125 bronze badges

answered Oct 17, 2015 at 9:30

Max Podriezov

1,11813 silver badges14 bronze badges

2 Comments

Michael Ramos Over a year ago

will use this to substitute for my answer as well, since selectedOptions is not supported in IE

Dzion Over a year ago

Here's a much cleaner, es6 way to do it :) [].filter.call(this.refs.selectRef.options, o => o.selected).map(o => o.value);

Michael Ramos · Accepted Answer · 2016-04-05 15:54:56Z

9

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.

edited Apr 5, 2016 at 15:54

answered Apr 5, 2016 at 15:44

Michael Ramos

5,8279 gold badges41 silver badges54 bronze badges

2 Comments

Inkling Over a year ago

As mentioned in one of my other comments, browser support for selectedOptions seems pretty sketchy. But it would probably be the ideal solution if the support was there.

Michael Ramos Over a year ago

Ah true, it seems like IE still does not support this

mantish · Accepted Answer · 2015-08-19 14:50:18Z

4

The following worked for me

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

answered Aug 19, 2015 at 14:50

mantish

4305 silver badges12 bronze badges

2 Comments

mantish Over a year ago

Correct, I used JQuery to retrieve the multiple values.

jamesmfriedman Over a year ago

You don't need react dom or jQuery. Just retrieve the value from the onChange event

Aral Roca · Accepted Answer · 2017-05-30 08:42:09Z

2

Another way to do it:

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

answered May 30, 2017 at 8:42

Aral Roca

5,9978 gold badges52 silver badges83 bronze badges

Comments

Julio Spinelli · Accepted Answer · 2022-03-11 18:36:22Z

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

air-dex · Accepted Answer · 2022-08-13 22:18:26Z

2

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 )

edited Aug 13, 2022 at 22:18

answered Aug 13, 2022 at 22:11

air-dex

4,2082 gold badges27 silver badges26 bronze badges

Comments

Slavi Vatahov · Accepted Answer · 2018-03-26 14:13:39Z

1

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>

edited Mar 26, 2018 at 14:13

answered Mar 26, 2018 at 14:07

Slavi Vatahov

112 bronze badges

1 Comment

Manmohan_singh Over a year ago

Add some more explanation to your solutions.

Hasintha Nayanajith · Accepted Answer · 2024-03-11 06:20:32Z

1

onChange={(e) => setSelectedTaxes(e.map((tax) => tax.value))}

answered Mar 11, 2024 at 6:20

Hasintha Nayanajith

214 bronze badges

Collectives™ on Stack Overflow

Retrieving value from <select> with multiple option in React

12 Answers 12

17 Comments

2 Comments

2 Comments

2 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

17 Comments

2 Comments

2 Comments

2 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related