How to get select2 multiple selected values and text

Today, we’ll discuss how to get select2 multiple selected values and text. In the previous article, we learned implementation of jquery select2 plugin in PHP.

We recommend you to check the following article to implement select2.

How to implement jQuery select2 multiple select plugin in PHP

Look at the following possible ways to get the multiple selected values and text.

To get selected text

Option 1:

var category = $('.category').find(':selected').text();

Option 2:

var category = $('.category').select2("data");
for (var i = 0; i <= category.length-1; i++) {
   console.log(category[i].text);
}

Option 3:

var category = $('.category').select2("data");
console.log(category.map(x => x.text));

To get selected values

Option 1:

var category = $('.category').select2("val");

Option 2:

var category = $('.category').val();

Example

Here, we will take a full example to get select2 multiple selected values and text using jQuery.

index.js

  <title>Get select2 multiple selected values and text using jquery - Clue Mediator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">



  <div class="container">
    <h3>Get select2 multiple selected values and text using jquery - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
    <br>
    <div class="col-md-4">
      <form method="POST">
        <div class="form-group">
          <label>Category:</label>
          <select class="category form-control" name="category[]" multiple>
            <option value="laravel">Laravel</option>
            <option value="jquery">Jquery</option>
            <option value="php">PHP</option>
            <option value="react">React</option>
            <option value="codeigniter">CodeIgniter</option>
            <option value="vuejs">Vue JS</option>
            <option value="bootstrap">Bootstrap</option>
            <option value="angularjs">Angular JS</option>
          </select>
        </div>
        <div class="form-group">
          <button class="btn btn-primary" id="saveData">Submit</button>
        </div>
        <div id="result">
        </div>
      </form>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function () {
      $('.category').select2();
    });

    $('body').on('click', '#saveData', function (e) {
      e.preventDefault();

      // Get Value
      var categoryVal = $('.category').val();
      console.log("values >>>", categoryVal);

      // Get Text
      var categoryText = $('.category').select2("data");
      console.log('text >>>', categoryText.map(x => x.text));
    });
  </script>

Check the output in the browser console to get the selected values and text.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂