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:
1 | var category = $('.category').find(':selected').text(); |
Option 2:
1 2 3 4 | var category = $('.category').select2("data"); for (var i = 0; i <= category.length-1; i++) { console.log(category[i].text); } |
Option 3:
1 2 | var category = $('.category').select2("data"); console.log(category.map(x => x.text)); |
To get selected values
Option 1:
1 | var category = $('.category').select2("val"); |
Option 2:
1 | var category = $('.category').val(); |
Example
Here, we will take a full example to get select2 multiple selected values and text using jQuery.
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <html> <head> <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" /> </head> <body> <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> </body> </html> |
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..!! 🙂
