نمایش فیلد سلکت با جاوا اسکریپت

میتونی با alpinjs یا هر کتابخانه ی کوچک جاوا اسکریپتی استفاده کنی، میتونم هم بصورت زیر با جاوا اسکریپت خام بنویسی

<form action="#">
  <select name="type" class="form-select" id="exampleFormControlSelect1" aria-label="Default select example">
    <option selected="">مدت زمان سرویس خود را انتخاب کنید</option>
    <option value="{{ $service->monthly_price }}">ماهیانه</option>
    <option value="{{ $service->yearly_price }}">سالیانه</option>
  </select>
  <input type="text" readonly="" class="form-control-plaintext" id="exampleFormControlReadOnlyInputPlain1" value="">
</form>

<script>
  const select = document.querySelector('#exampleFormControlSelect1');
  const input = document.querySelector('#exampleFormControlReadOnlyInputPlain1');

  select.addEventListener('change', () => {
    input.value = select.value;
  });
</script>

با alpinejs

<div x-data="{ selectedOption: '' }">
  <form action="#">
    <select name="type" class="form-select" id="exampleFormControlSelect1" aria-label="Default select example" x-model="selectedOption">
      <option value="">مدت زمان سرویس خود را انتخاب کنید</option>
      <option value="{{ $service->monthly_price }}">ماهیانه</option>
      <option value="{{ $service->yearly_price }}">سالیانه</option>
    </select>
    <input type="text" readonly="" class="form-control-plaintext" id="exampleFormControlReadOnlyInputPlain1" :value="selectedOption">
  </form>
</div>