How to Get Multiple Selected Values of Select Box in Laravel

Hello artisan in this example i will show you how to get multiple selected values of select box in laravel application. Sometimes we need multi select value in our laravel application. To get this multi select value jQuery has a nice plugin called select2.

Using this select2 we can get this multi select value. In this example i will simply create a form i will show you a select box where from we can select multiple value at a time. Not only that i will show you also laravel multi select dropdown search example. That mean you can search to get real time data in your multi select box.

In this example i will show you how to create a select box where you can insert multiple tag from select box or you can insert new value in your select box like tag system. All of those things i will create using this jQuery select2 plugin. Let's see how we can create this.

 

Step 1: Download Laravel

Download a fresh Laravel application to get your multi select form. Run below command to download Laravel application.

composer create-project laravel/laravel example-app

 

Step 2: Create Route

To complete this laravel multi select dropdown example we need a route to show you requested data. Update your web.php like that

routes/web.php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
})->name('select2');


Route::post('/', function (Request $request) {
    return $request->state;
});

 

Step 3: Create Blade File

Almost all are set to go. Now in this last step we need to create a welcome balde file. So create it.

resources/views/welcome.blade.php

 

Now run your application by the following command

php artisan serve

 

And now test it by visiting the following url

 

visit
http://127.0.0.1:8000/

 

Now visit this url and select value and submit this form and you will get this url:

[
  "AL",
  "WY"
]

 

Now let's see some modification of this select2 plugin. You can set placeholder in your select2 search box like that:

$(document).ready(function() {
   $('.js-example-basic-single').select2({
      placeholder: "Select a state",
      allowClear: true,
   });
});

 

Now you know that you can create a tag box that mean you will insert new data in your value list or you can set multiple value from that select options. See the example code and try:

$(document).ready(function() {
    $('.js-example-basic-single').select2({
      placeholder: "Select a state",
      allowClear: true,
      tags: true,
      tokenSeparators: [',', ' ']
    });
});

 

Read also: Create Recycle Bin in Laravel Using Eloquent Soft Delete

 

Hope it can help you.

 

author-image
Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js