Skip to content

All topics  /  General

Select2 Multiple Selected Get Value and Text Example

General ·

Development teams using “Select2 Multiple Selected Get Value and Text Example” in client or internal work can use low productivity at work main factors strategies to document project effort and hand-offs, then assess the record against delivered functionality, tests and agreed outcomes.

Validate current syntax, security guidance and supported versions through GitHub before using the example in production.

+Hello Friend,

Today, I am going learn you how to get select2 multiple selected value or text using jquery. I will show you get multiple selected value or text in jquery. We will get multiple selected text in jquery.

Jquery select2 plugin is a very famous jquery plugin, using select2 plugin we can do several thing like select box with search, select option with check box, ajax auto-complete etc.

Here I will give you solution and full example for get select2 multiple selected value or text using jquery.

Solution 1 : Get Text


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

Solution 2 : Get Text 

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

Solution 1 : Get Value 

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

Solution 2 : Get value 

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

Example 1 : Get Text 

<html lang="en">
<head>
    <title>Select2 Multiple Selected Get Value and Text Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
    <div class="row mt-5">
        <div class="col-md-6 offset-3 mt-5">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5>Select2 Multiple Selected Get Value and Text Example - Nicesnippets.com</h5>
                </div>
                <div class="card-body" style="height: 300px;">
                    <div class="row mb-2">
                        <div class="data-response col-md-12" style="display: none;">
                            <div class="alert alert-success"></div>
                        </div>
                    </div>
                    <form method="POST">
                        <div class="form-group">
                            <label>Category :</label>
                            <select class="category form-control" name="category[]" multiple>
                                <option value="1">Laravel</option>
                                <option value="2">Jquery</option>
                                <option value="3">PHP</option>
                                <option value="4">React</option>
                                <option value="5">Jquery ui</option>
                                <option value="6">Android</option>
                                <option value="7">React Native</option>
                                <option value="8">Vue js</option>
                                <option value="9">Bootstrap 4</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-success store-data btn-sm">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

            
        $(document).ready(function() {
              $('.category').select2();
          });
        $('body').on('click','.store-data',function (e) {
            e.preventDefault();
            //Get Text
            var selected = $('.category').select2("data");
            for (var i = 0; i <= selected.length-1; i++) {
                console.log(selected[i].text);
            }
        });
    </script>
</body>
</html>

Example 2 : Get Value 

<html lang="en">
<head>
    <title>Select2 Multiple Selected Get Value and Text Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
    <div class="row mt-5">
        <div class="col-md-6 offset-3 mt-5">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5>Select2 Multiple Selected Get Value and Text Example - Nicesnippets.com</h5>
                </div>
                <div class="card-body" style="height: 300px;">
                    <div class="row mb-2">
                        <div class="data-response col-md-12" style="display: none;">
                            <div class="alert alert-success"></div>
                        </div>
                    </div>
                    <form method="POST">
                        <div class="form-group">
                            <label>Category :</label>
                            <select class="category form-control" name="category[]" multiple>
                                <option value="1">Laravel</option>
                                <option value="2">Jquery</option>
                                <option value="3">PHP</option>
                                <option value="4">React</option>
                                <option value="5">Jquery ui</option>
                                <option value="6">Android</option>
                                <option value="7">React Native</option>
                                <option value="8">Vue js</option>
                                <option value="9">Bootstrap 4</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-success store-data btn-sm">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

            
        $(document).ready(function() {
            $('.category').select2();
        });
        $('body').on('click','.store-data',function (e) {
            e.preventDefault();
            //Get Value
            // var selected = $('.category').select2("val");
            var selected = $('.category').val();
            console.log(selected);
        });
    </script>
</body>
</html>

It will help you...

More on this topic