{"id":15105766,"url":"https://github.com/arifurdev/multiselect-inputs-with-livewire-3","last_synced_at":"2026-01-30T23:43:50.851Z","repository":{"id":251365265,"uuid":"820290420","full_name":"ArifurDev/multiselect-inputs-with-livewire-3","owner":"ArifurDev","description":"This guide explains how to implement multiselect inputs with Livewire 3.","archived":false,"fork":false,"pushed_at":"2024-06-26T08:19:30.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T04:57:19.718Z","etag":null,"topics":["laravel-livewire","livewire3","multiselect","multiselect-drodpdown","multiselect-livewire","select2"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArifurDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-26T07:21:01.000Z","updated_at":"2024-06-26T08:32:02.000Z","dependencies_parsed_at":"2024-08-02T14:13:06.929Z","dependency_job_id":"7bb918b0-ec75-46c0-b367-7b875f750108","html_url":"https://github.com/ArifurDev/multiselect-inputs-with-livewire-3","commit_stats":null,"previous_names":["arifurdev/multiselect-inputs-with-livewire-3"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArifurDev%2Fmultiselect-inputs-with-livewire-3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArifurDev%2Fmultiselect-inputs-with-livewire-3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArifurDev%2Fmultiselect-inputs-with-livewire-3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArifurDev%2Fmultiselect-inputs-with-livewire-3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArifurDev","download_url":"https://codeload.github.com/ArifurDev/multiselect-inputs-with-livewire-3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339161,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel-livewire","livewire3","multiselect","multiselect-drodpdown","multiselect-livewire","select2"],"created_at":"2024-09-25T20:43:01.849Z","updated_at":"2026-01-30T23:43:50.789Z","avatar_url":"https://github.com/ArifurDev.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Using Multiselect Inputs with Livewire 3\n\nThis guide explains how to implement multiselect inputs with Livewire 3.\n\n## Blade Template\n### (resources/views/livewire/your-component.blade.php)\n\nAdd the following Blade code to your view. The `wire:ignore` directive is used to prevent Livewire from interfering with the jQuery plugin.\n\n```blade\n\u003cdiv class=\"form-group\" wire:ignore\u003e\n        \u003clabel for=\"options\"\u003eSelect Options:\u003c/label\u003e\n        \u003cselect class=\"form-control mb-3 js-example-basic-multiple\" multiple id=\"options\"\u003e\n                \u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\n                \u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\n                \u003coption value=\"fiat\"\u003eFiat\u003c/option\u003e\n                \u003coption value=\"audi\"\u003eAudi\u003c/option\u003e\n        \u003c/select\u003e\n\u003c/div\u003e\n\n```\n# JavaScript\nInclude the following script in your Blade template to handle the change event of the multiselect input. This script will update the Livewire component's property **selectedOptions** with the selected values.\n\n```js\n@script\n  \u003cscript\u003e\n  \n       $(document).ready(function() {\n          $('#options').on('change', function(e){\n              // let selectedValues =  e.target.value;\n              let selectedValues =  $(this).val();\n              $wire.$set('selectedOptions', selectedValues);\n          });\n      });\n  \n  \u003c/script\u003e\n@endscript\n```\n\n## component \n### Livewire Component (app/Http/Livewire/YourComponent.php)\nIn your Livewire component class, declare the **selectedOptions** property.\n```php\nnamespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse App\\Models\\Attribute;\n\nclass YourComponent extends Component\n{\n    public $selectedOptions = [];\n\n    public function render()\n    {\n        return view('livewire.your-component');\n    }\n}\n```\n\n## Note\nMake sure you have jQuery and the select2 library included in your project.\n\n```\n\u003c!-- Include select2 CSS --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css\" rel=\"stylesheet\" /\u003e\n```\n```\n\u003c!-- Include jQuery --\u003e\n\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Include select2 JS --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Initialize select2 --\u003e\n\u003cscript\u003e\n    $(document).ready(function() {\n        $('.js-example-basic-multiple').select2();\n    });\n\u003c/script\u003e\n\n```\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifurdev%2Fmultiselect-inputs-with-livewire-3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farifurdev%2Fmultiselect-inputs-with-livewire-3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifurdev%2Fmultiselect-inputs-with-livewire-3/lists"}