Level 1
Would love to find an answer on this too!
Oct 18, 2022
5
Level 1
Multiselect using Choices-js
I need a multiselect dropdown box to select users for giving feedback.
I am using the Choices-js package (https://github.com/Choices-js/Choices).
It is working fine on the form, but only returning the last user selected. And even if I select a user and then remove it, it is returning that user's id.
In my livewire component I have public $feedback_users = [];
Here is my select form
<div wire:ignore class="mb-3">
<select multiple wire:model.lazy="feedback_users" class="form-select js-choice"
id="feedback_users" name="feedback_users"
data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select atleast one...</option>
@foreach ($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
@endforeach
</select>
</div>
Appreciate everyone's help.
Level 1
@super_simon123 I never figured it out. I could not get Select2 to work either. I ended up going with a input field list of checkboxes instead for each user. It works, but I will eventually get back to trying to figure this out.
Level 3
Did you find an answer on your question?
Level 1
@bogdangiroe No. Never did. As mentioned I just did checkboxes for each user. Not ideal but it works.
Level 1
I've got the same issue. I solved it adding a js script and a sending an event. This is my solution:
let query_task = null;
document.addEventListener("DOMContentLoaded", function() {
const selectElement = document.querySelector('.choices');
query_task = new Choices(selectElement, {
removeItemButton: true
});
// Listen to the 'removeItem' event
query_task.passedElement.element.addEventListener('removeItem', function(e) {
// Find the removed option in the original select element
const removedOption = Array.from(selectElement.options).find(opt => opt.value === e.detail.value);
if (removedOption) {
// Re-add the removed option to the choices list
query_task.setChoices([{
value: removedOption.value,
label: removedOption.text
}], 'value', 'label', false);
}
const selectedOptions = query_task.getValue(true);
@this.dispatch('selectionChanged', [selectedOptions]);
}, false);
// Listen to the 'addItem' event
query_task.passedElement.element.addEventListener('addItem', function(e) {
// Remove the added option from the original select element
Array.from(selectElement.options).forEach((opt, index) => {
if (opt.value === e.detail.value) {
selectElement.remove(index);
}
});
// Save the selected options
const selectedOptions = query_task.getValue(true);
@this.dispatch('selectionChanged', [selectedOptions]);
}, false);
});
2 likes
Please or to participate in this conversation.