How to Use Select2 Dropdown in Laravel for Multiple Select

by

Laravel select2 dropdown for multiple select example; in this tutorial we lean How to create and use dynamic multi select dropdown using jQuery Select2 plugin in Laravel application. We give you both code single and multiple select option using select2 package.

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Laravel 9 Select2 Dropdown Dynamic Search Example

Follow the following steps to resolve how to use select 2 dropdown in laravel for multiple select:

  • Step 1: Add CDN Packages
  • Step 2: Add Select2 code in blade file
  • Step 3: Add js script
  • Step 4: Use select2 dyanamically in laravel

Step 1: Add CDN Packages

First you need to add these cdn in your layouts file inside head section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
</head>

Step 2: Add Select2 code in Blade File

Now add below code in where you show select box inside form.

<div class="form-group">
    <strong>Name:</strong>
    <select id='myselect' multiple>
      <option value="">Select An Option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
</div>

Step 3: Add Js Script

Now add the javascript code in your custom js or in same file just like below code.

<script>
  $('#myselect').select2({
    width: '100%',
    placeholder: "Select an Option",
    allowClear: true
  });
</script>

Now you can check the select 2 select more then option in one select box. If you want to select single option you can remove “multiple” option from select div.

How to Use Select 2 Dynamically in Laravel

Now we show you how to select 1, 2 or more option using select 2 dynamically in laravel app. All JS library and js code is same just option the blade file code just like below.

Here we have multiple tags objects array comes from controller and we running using foreach and showing the options just check the below code.

<div class="form-group">
    <strong>Name:</strong>
    <select id='myselect' multiple>
      <option value="">Select An Option</option>
      @foreach($tags as $tag)
        <option value="$tag->id">{{ $tag->name }}</option>
      @endforeach
    </select>
</div>

So, the select 2 for multiple select in laravel example is over now. If you are search retain old value multiple select dropdown in laravel you can check here more maintain old value tutorial here.

Leave a Comment