How to get the selected option value in Livewire?

Do you want to use Multi select dropdown in the Livewire application?

So, this tutorial will guide us step-by-step on an example of Livewire getting the selected value.

Livewire gets the selected values (Livewire multiple select)

Given a list of items and the task is to retrieve the multiple selected value from a select box using Livewire.
Use multiple attributes in Livewire to select multiple values from the drop-down list. Selecting multiple values in HTML depends on the operating system and browser.

For window users – hold down + CTRL key to select multiple options
For mac users – hold down the command key to select multiple options.

Okay, let’s get straight to the steps for Getting the selected option value in Livewire with an Example 👇

Create a Livewire Component

php artisan make:livewire UserList

Okay, next we need to create a livewire component to create multiple select using Livewire. Please run the artisan command as above. From this command, it will generate two files located in the directory as below.

CLASS: app/Http/Livewire/UserList.php
VIEW:  resources/views/livewire/user-list.blade.php

routes/web.php

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\UserList;


Route::get('/users',UserList::class);

resources/views/livewire/admin/user-list.blade.php

<form wire:submit.prevent="storeUser">
   @csrf 
   <div>
      <label>Name<span class="text-danger">*</span></label>
      <input type="text" wire:model.defer="name">
   </div>
   <div>
      <label>Language</label>
      <select wire:model="selectedLanguages"  multiple="multiple">
         <option value="Hindi">Hindi</option>
         <option value="English">English</option>
         <option value="Russian">Russian</option>
         <option value="French">French</option>
         <option value="Urdu">Urdu</option>
      </select>
   </div>
   <div>
      <button type="submit"> Submit</button>
   </div>
</form>

app/Http/Livewire/UserList.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class UserList extends Component
{

public $name;
public $selectedLanguages = [];
   
    public function storeUser()
    {
    $languages = implode(',', (array) $this->selectedLanguages); 
    $user = new User();
    $user['name'] =   $this->name;
    $user['languages'] =   $languages;
    $user->save();
   }

    public function render()
    {
       return view('livewire.user-list');
    }
}

I hope that this article helped you learn how to get the selected option value in the Livewire application. You may also want to check out our guide on Create A Chart In The Livewire Application.

Livewire gets the selected values (Livewire multiple select)

Related Posts