Laravel Livewire Dependent Dropdown with Select2

In this video, we will learn how to implement dependent dropdowns in Laravel Livewire using select2. Dependent dropdowns are a common feature in web applications that allow users to select a value from one dropdown, and then filter the options in another dropdown based on the selected value.
select2 is a JavaScript library that provides a number of enhancements to native HTML select elements, including:
Search functionality
The ability to select multiple options
A more user-friendly interface
What you will learn in this video:
How to install and configure select2 in Laravel
How to create a Livewire component for dependent dropdowns
How to handle events and update the options in the dependent dropdown
How to style the select2 elements
You can find me on:
Twitter: @CodeWithTonyDev
GitHub: github.com/cod...
Laravel Hosting: hostinger.com?REFERRALCODE=1TONY55
Latest Playlists:
Laravel Multi-Language: • Laravel Multi-Language...
Filament V3 Tutorial: • Filament PHP V3 Tutorial
Laravel Event Project: • Laravel Event Project ...
Laravel Spade Employees Management: • Laravel Splade Employe...
React Authentication: • Laravel React Authenti...
Vue Authentication: • Vue Authentication Tut...

[@tonyxhepaofficial]

Laravel Livewire Dependent Dropdown with Select2

[@ZahraNurwantia]

thanks bro, i was honestly confused by the livewire 3 updates,
the method are so much different to implement select2 than the previous livewire version

[@jersonmoreno7618]

It's a nice example. Thanks for that!

[@FaizanAmin_Faizi]

Thanks a lot tony for making this on my request 😊

[@davidmutua6971]

Livewire v3 not working with multiple attribute. The multiple select is distorted. Please make a demo to demo multiple in livewire v3

[@gaton313]

thank you. need for multi select dropdown also.

Can u do it with TomSelect?

[@michaelbarasa1569]

Can you do one for updating

[@Darkenfaith]

Hi, how to get selected data and store it to database? I've added wire:model on select tag but always return null when I tried to get the data

[@devhammed]

Nice tutorial!
But you don't need the document ready since Livewire will execute the script only when it's about to work on the component and instead of adding ID to the select element, I would use a data- attribute or a class instead (e.g data-select-input or .select-input) to avoid using names that can result in invalid selectors (e.g Postal Code) and the script will be like:
const select = $wire.$el.querySelector('[data-select-input]'); // or $wire.$el.querySelector('.select-input');
$(select).select2();
$(select).on('change', function (event) {
$wire.$set('value', event.target.value);
});

[@JCPatagonia]

Tks! Its posible use select2 in modal component?

[@appimedi9738]

hi tony, what is the reason why you don't like jquery?

[@-_-balen-_-9722]

thank you

[@tonyxhepaofficial]

Welcome!

[@asdf072xxp]

Do you (anyone) know how to get it to select initialized values correctly? If in this example, you initialize public $selectedCountry = 2, the Select2 element won't display the correct country (although it will report the correct value in the console).
Anyone have a fix?

[@krekas]

Please don't use select2. There are better alternatives these days without jquery

[@DanMlayah]

Examples of these alternatives ?

[@krekas]

tom select, virtual select, choicesjs

[@yusufbakkali3410]

yeah tom select is good and better of select2 for me