Skip to main content

Share Everywhere

Table of contents

In this tutorial i will explain react multiselect dropdown example. Sometimes we need to create react-bootstrap multiselect dropdown example for our web application. Now in this following tutorial i will show it from scratch.

I will explain step by step explain react multi select dropdown component. Just you need to follow bellow step for how to use multi select dropdown in react. In this following example, we will take one categories array with "PHP", "Laravel" , "Angular" etc. and simply using map loop display dynamic multiple option. 

Take one categories

import React, { Component } from 'react';

class MultiSelectDropdown extends Component {

  constructor() {

    super();

    this.state = {

      categories: [

        {id: 1, value: "PHP"},

        {id: 2, value: "Laravel"},

        {id: 3, value: "Angular"},

        {id: 4, value: "React"}

      ],

      selCategories: 'php'

    };

       

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

     

  handleChange(event) {

    

    const selected=[];

    let selectedOption=(event.target.selectedOptions);


    for (let i = 0; i < selectedOption.length; i++){

        selected.push(selectedOption.item(i).value)

    }

  

    this.setState({selCategories: selected});

  }

      

  handleSubmit(event) {

    console.log(this.state);

    event.preventDefault();

  }

      

  render() {

    return (

      <div>

        <h1>React Select Dropdown onChange Example</h1>

        <form onSubmit={this.handleSubmit}>

            

          <strong>Select Category:</strong>

          <select multiple onChange={this.handleChange.bind(this)}>

           {

            this.state.categories.map((item ,i )=> (

               <option key={i} value={item.id}>{item.value}</option>

             ))

          }

          </select>

    

          <input type="submit" value="Submit" />

        </form>

      </div>

    );

  }

}    

export default MultiSelectDropdown; 
Bạn cảm thấy bài viết này như thế nào?

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
5 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.