时间戳

首页 > 解决方案 > 使用 alpine js 在选择更改时初始化 select2

laravel - 使用 alpine js 在选择更改时初始化 select2

问题描述

我有一个带有选择的表格，并且在更改（选择某个选项时），我希望其他选择变得可见。第二个选择使用 select2。为此，我使用 Alpine JS（在 Laravel 中）。

问题是第二个选择在页面加载时不可见，并且在文档就绪时初始化 select2 的查询代码未加载。

当我在第一个选择中选择特定值时，第二个选择显示，但它的宽度很小。

如何动态初始化 select2？

<div x-data="{vervoerswijze:1}">

  <div class="mt-4">
    <select x-model='vervoerswijze' class="text-gray-500 form-select block w-full mt-1 shadow-sm rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
      <option>Kies een optie</option>
      <option value="1">Winkel</option>
      <option value="2">Met gebruiker(s)</option>
    </select>
  </div>

  <div x-show="vervoerswijze == 2" class="mt-4 w-full" wire:ignore>
    <x-jet-label class="text-gray-500 font-normal text-base mb-4" for="Gebruikers" value="{{ __('Selecteer gebruikers') }}" />
    <select wire:model="gebruikerinwagen"  class="select2 text-gray-500 form-select block w-full mt-1 shadow-sm rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" multiple="multiple">
      @foreach ($gebruikers as $gebruiker)
        <option value="{{ $gebruiker->id }}">{{ $gebruiker->first }} {{ $gebruiker->last }}</option>
      @endforeach
    </select>
  </div>     
</div> 

<script>
$(function(){
  $('.select2').select2().on('change', function(){
    @this.set('gebruikerinwagen', $(this).val());
  });
})
</script>

标签： laraveljquery-select2alpine.js

解决方案

您也许可以执行以下操作

<template x-if="vervoerswijze == 2">
  <div class="mt-4 w-full" wire:ignore>
    <x-jet-label class="text-gray-500 font-normal text-base mb-4" for="Gebruikers" value="{{ __('Selecteer gebruikers') }}" />
    <select x-data="initSelect2($el)" wire:model="gebruikerinwagen"  class="select2 text-gray-500 form-select block w-full mt-1 shadow-sm rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" multiple="multiple">
      @foreach ($gebruikers as $gebruiker)
        <option value="{{ $gebruiker->id }}">{{ $gebruiker->first }} {{ $gebruiker->last }}</option>
      @endforeach
    </select>
  </div>
</template>

<script>
function initSelect2(element) {
  $($element).select2().on('change', function(){
    @this.set('gebruikerinwagen', $(this).val());
  });
}
</script>

主要变化是：

  • select在页面上呈现相关内容时初始化 Select2 （使用 Alpine.js x-data）
  • 使用 an x-if（而不是x-show），以便select仅在必要时呈现（因此 select2 仅在必要时被初始化）

推荐阅读