AlpineJS: @click doesn't work on <option> tag

Question

I'd like to make changes value using @click in <option>, how can improve it while the code seems like @click inside on <option>

 <x-input select class=" w-[270px] h-10 duration-100" x-bind:disabled="modal ? true : false">
     @foreach (DB::table('t930_calendar_name')->get() as $v)
         <option value="{{ $v->c_calendar_name }}" 
                 @click="confirm ? modal = true : subActive = '{{ $v->c_calendar_name }}'; tempSubActive =  '{{ $v->c_calendar_name }}'">
             {{ $v->c_calendar_name }}
         </option>
     @endforeach
 </x-input>

I have tried but the value doesn't change, I've try like this to check the value changed.

<span x-text="subActive + ' subActive'"></span><br>
<span x-text="tempSubActive + ' tempSubActive'"></span><br>

Answer 1

It solved. Using this one

<x-input select class="w-[270px] h-10 duration-100" 
         @change="confirm ? modal = true : subActive = $event.target.value; 
         confirm ? tempSubActive = $event.target.value : tempSubActive = subActive; 
         confirm ? $event.target.value = subActive : tempSubActive = subActive;"
         x-bind:disabled="modal ? true : false">
         @foreach (DB::table('t930_calendar_name')->get() as $v)
                <option value="{{ $v->c_calendar_name }}"
                     x-text="tempSubActive != subActive ? tempSubActive : '{{ $v->c_calendar_name }}'">
                </option>
         @endforeach
</x-input>