10-Jul-2020
.
Admin
-0.png)
Hi Dev,
In this blog, I will learn you how to reset to show placeholder select2. JQuery Select2 reset thenafter show placeholder. We will reset select2 to display placeholder.Jquery select2 plugin is provide reset to show placeholder only add placeholder in select2 automatically show placeholder after claer select option.
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.
Solution
$('.category').select2({
placeholder: "Select Category",
allowClear: true // This is for clear get the clear button if wanted
});
Example
<html lang="en">
<head>
<title>PHP Select2 Multiple Select Example Tutorial</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">
<h6>Select2 Multiple Selected Get Value and Text Example - Nicesnippets.com</h6>
</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({
placeholder: "Select Category",
allowClear: true // This is for clear get the clear button if wanted
});
});
</script>
</body>
</html>
It will help you...
#Jquery
#Bootstrap 4
