Level 80
@smoketm I don’t understand what you’re trying to archive. This is how multiple select inputs work by default: multiple options can be chosen by holding a modifier key (shift I think by default) when selecting options.
1 like
Dec 28, 2022
2
Level 10
Make the option in a multi select clickable with keypress
I am trying to make my options in a multi selectbox only clickable if the key control "ctrl" is pressed. I am adding inputs on click and I want the selected options to be in sync. I want to achive that with alpine js. Maybe someone can help?
<select id="speaker_id" name="speaker_ids[]" multiple
class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm
focus:border-brand focus:outline-none focus:ring-brand sm:text-sm">
@foreach (\App\Models\Speaker::all() as $speaker)
<option value="{{ $speaker->id }}" x-data="{ disabled: true }" @keydown.shift="disabled = false" x-bind:disabled="disabled"
wire:click.prevent="addInput('{{ $speaker->id }}', '{{ $speaker->name }}')"
{{ (in_array($speaker->id, old('speaker_ids', []))) ? 'selected' : '' }}>{{ $speaker->name }}
</option>
@endforeach
</select>
Level 10
@martinbean Thanks for you answer! What I want is to be sure the key shift or ctrl is pressed when the user is selecting the options. So addInput should only be fired if the user has pressed the key "shift" or "ctrl". I am using livewire here.
wire:click.prevent="addInput('{{ $speaker->id }}', '{{ $speaker->name }}')"
Please or to participate in this conversation.