Select2 Multiple Selected Get Value and Text Example

jquery , Bootstrap 4

Nicesnippets

1330

06-07-2020


+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="http://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="http://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...


Recommended Posts