0

我正在使用 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>

这似乎不适用于我的表格，我不知道为什么。当表单加载时，所有控件都会显示，并且在选择时，没有隐藏。即使我尝试设置默认值x-data="{payFor: 'service'}"，它仍然无法正常工作。有什么解决办法吗？

4

2 回答 2

0

不确定这是否与 laravel 有任何关系，但这是您在纯 html 中执行此操作的方式（这也适用于您的上下文）：

document.getElementById('payFor').addEventListener("change", function (e) {
    if (e.target.value === 'product') {
        document.getElementById('services').style.display = 'none';
        document.getElementById('products').style.display = 'block';
    } else {
        document.getElementById('products').style.display = 'none';
        document.getElementById('services').style.display = 'block'
    }
});
<!DOCTYPE html>
<html>
   <body>
      <form>
         <label for="payFor">Select what to pay for:&nbsp;</label>
         <select name="payFor" id="payFor">
            <option disabled selected value>-</option>
            <option value="service">Service</option>
            <option value="product">Product</option>
         </select>
         <div style="display: none;" id="services">
            <select name="serviceId">
               <option disabled selected value>-</option>
               <option value="service1">service 1</option>
               <option value="service2">service 2</option>
            </select>
         </div>
         <div style="display: none;" id="products">
            <select name="productId">
               <option disabled selected value>-</option>
               <option value="product1">product 1</option>
               <option value="product2">product 2</option>
            </select>
         </div>
      </form>
   </body>
</html>

只需将选择器添加到您的 div 中，然后添加此脚本即可完成工作。

于 2021-08-24T04:34:10.343 回答
0

我想出了另一个出路。由于我使用的是 livewire，因此我必须@if... @else...@endif在 HTML 类属性中使用语句来切换使用show或hide顺风类的 div。

于 2021-09-10T08:28:54.590 回答