How to get multiple selected options value in React JS?

react-select multiple value example
react-select onchange
react-select get value
react-select example
react-select value container
react-select tooltip
react-select clear value
react-select bootstrap
<Multiselect label='Select College' ref="collegeList" onChange={this.handleChange} multiple >
         <option value='college1'>college1</option>
         <option value='college2'>college2</option>
</Multiselect>

This component is from https://github.com/skratchdot/react-bootstrap-multiselect

What should be written inside the handleChange() function ?

Unfortunately, react-bootstrap-multiselect doesn't seem to expose any sort of API for getting the currently selected items, so you'll have to query them from the DOM directly. Try something like this:

handleChange: function () {
    var node = React.findDOMNode(this.refs.collegeList);
    var options = [].slice.call(node.querySelectorAll('option'));
    var selected = options.filter(function (option) {
        return option.selected;
    });
    var selectedValues = selected.map(function (option) {
        return option.value;
    });

    console.log(selectedValues);
}

If you're using jQuery, this can be simplified a bit to:

handleChange: function () {
    var node = $(React.findDOMNode(this.refs.collegeList));
    var selectedValues = node.children('option:selected').map(function(option) {
        return option.value;
    });

    console.log(selectedValues);
}

How to get multiple selected options value in React JS?, handleChange} input={<Input id="select-multiple-chip" />} renderValue={selected => ( <div className={classes.chips}> {selected.map(value => <Chip  For the sake of simplicity, here we will consider static select/option dropdowns. In a typical select/option dropdown, the usual required value to be sent when an option is selected is set to the value attribute. For example, in a typical country list dropdown, you might have set the option values to respective ISO 3166 codes as shown below

Here's a much cleaner, es6 way to do it :)

let selected = [...this.refs.select]
  .filter(option => option.selected)
  .map(option => option.value)

There you go, all of the selected options!

How to get multiple values from a react multiple select component , Hi there, I have a form which has 3 select multiple inputs among other inputs. I want to be able to select multiple values from the user and push them into an https://stackblitz.com/edit/reactstrap-v6-wwzerv?file=Example.js  Sometime we need to add multiple checkboxes for use chooies like we can give option to choose for fruits that like user and he will select multiple from list. so if you need to add multiple checkboxes in react js then i will show how to can use multiple checkbox in react.

I would suggest to have a state in your component called selectedItems

The onChange callback then, takes as parameters element and checked, from the Bootstrap Multiselect docs. Element has the val() method, which returns the value assigned to the option.

Therefore handleChange could be implemented in the following way

handleChange: function (element, checked) {
    var newSelectItems = _.extend({}, this.state.selectItems);
    newSelectItems[element.val()] = checked;
    this.setState({selectItems: newSelectItems})
},
getInitialState: function () {
     return {selectItems: {}};
}

In this way, every time an element is clicked, its checked attribute is saved in the component state, which is quite handy if you need to change anything based on the MultiSelect selected values.

Please note that for the above code you need either the Underscore or the Lodash library. This is necessary as React cannot merge nested objects, as answered here.

React MultiSelect Component & Data and Value Binding, isMulti - allow the user to select multiple values; isSearchable - allow the user to search for matching options; name - generate an HTML input  The usual way: var values = $('#select-meal-type').val(); From the docs:. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option;

A much simpler and a direct way to get the values:

handleChange: function () {
   var selectedValues = this.refs.collegeList.$multiselect.val();
   console.log(selectedValues);
}

Select Multiple Input to capture array of options · Issue #1167 , But in most cases, it's convenient to have a JavaScript function that handles the In HTML, form elements such as <input> , <textarea> , and <select> typically into the value attribute, allowing you to select multiple options in a select tag:. There are a variety of ways to use JavaScript to obtain the value of the selected option in a select list or a reference to the selected option: Use the value property of the select list. Use the selectedIndex property. Loop through the options and determine which one is selected and return either its value or a reference.

you can use selectedOption that return a htmlCollection like this

 onchange(e){
        let selected=[];//will be selected option in select
        let selected_opt=(e.target.selectedOptions);
        console.log(selected_opt)
        for (let i = 0; i < selected_opt.length; i++){
            selected.concat(selected_opt.item(i).value)
        }

    }

and our select

<select  onChange={this.onchange.bind(this)} className="selectpicker w-100 rtl" multiple >
                    {this.state.list.map(obj=><option value={obj[this.props.val]}>{obj[this.props.name]}</option>)}
                </select>

react-select, multi select dropdown in react js example, react multiselect dropdown after when you submit form then you can get selected option values. <option value={option.value} selected={optionsState == option.value}>{option.label}</option> and it will output 'selected' appropriately. However, React makes this even easier for you. Instead of defining selected on each option, you can (and should) simply write value={optionsState} on the select tag itself:

Forms – React, Select component to select value from options. Multiple selection, selecting from existing items. expand code react-domlatest Get value of selected item. The <select> element is set to allow multiple items to be selected, and it is 7 rows tall. Note also the <button>, whose role it is to trigger fetching the HTMLCollection of selected elements using the selected property. JavaScript. The JavaScript code that establishes the event handler for the button, as well as the event handler itself, looks

React Multi Select Dropdown Example, <select id="framework" multiple> <option value="1">Angular</option> <option value="2">React</option> <option value="3">Vue.js</option> <option The following example illustrates how to get the index of the selected option: <!​DOCTYPE  The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.

Select, You can pass an array into the value attribute, allowing you to select multiple options in a select tag: <select multiple={true} value={['B', 'C']}> The file input Tag In HTML, an <input type="file"> lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the File API.

Comments
  • Can you try to do handleChange: function (event) { console.log(event); } and see if it logs anything?
  • ya i have checked it but don't know which field to look for to get the selected elements.
  • Actually from onChange you receive the element itself being clicked, and a boolean value, true if the element was checked, false otherwise. You will find below my complete answer.
  • Check it out npmjs.com/package/multiselect-react-dropdown
  • Or instead of [...this.refs.select] you could do Array.from(this.refs.select)
  • or using selectedOptions: let selected = [...this.refs.select.selectedOptions].map(o => o.value)