使用 alpine js 在选择更改时初始化 select2答案

【问题标题】：Initialize select2 on select change with alpine js使用 alpine js 在选择更改时初始化 select2
【发布时间】：2021-10-29 12:36:46
【问题描述】：

我有一个选择，一个表单，更改（选择某个选项），我想要另一个选择变为可见。第二个选择使用 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>

【问题讨论】：

标签： laravel jquery-select2 alpine.js

【解决方案1】：

您也许可以执行以下操作

<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）
使用x-if（而不是x-show）以便仅在必要时呈现select（因此仅在必要时才初始化select2）

【讨论】：