Показать / скрыть ввод формы на основе выбранного варианта

Question

Я использую Laravel с alpinejs версии 3.2.4. Я хотел бы показать / скрыть некоторые элементы ввода и показать их в зависимости от того, что выбирает пользователь. Это мой код:

      <form x-data="{payFor: ''}">

  <select x-model="payFor" name="payFor">
    <option value="service">Service</option>
    <option value="product">Product</option>
  </select>

  <div x-show="payFor == 'service'">
    <select name="serviceId">
      @foreach($services as $service)
      <option value="{{ $service->id }}">{{ $service->service_name }}</option>
      @endforeach
    </select>
  </div>

  <div x-show="payFor == 'product'">
    <select name="productId">
      @foreach($products as $product)
      <option value="{{ $product->id }}">{{ $product->product_name }}</option>
      @endforeach
    </select>
  </div>
 
</form>

Похоже, это не работает с моими формами, и я не могу понять, почему. Когда форма загружается, отображаются все элементы управления, а при выборе ни один из них не скрывается. Даже когда я пытаюсь установить по умолчанию он по-прежнему не работает. Любое решение для этого?

Answer 1

Я придумал другой выход. Поскольку я использую livewire, мне пришлось использовать @if... @else...@endif оператор в атрибуте класса HTML для переключения div с помощью show или hide классы попутного ветра.

Answer 2

Не уверен, есть ли здесь какие-либо отношения, такие как laravel, но вот как вы это делаете в обычном html (это также будет работать в вашем контексте):

Просто добавьте селекторы в свой div и добавьте этот скрипт, чтобы выполнить свою работу.