使用Alpine JS监听下拉框变更时如何动态初始化Select2

• 页面加载时第二个多选下拉框处于隐藏状态，Select2初始化时无法获取父容器的实际宽度，导致渲染后宽度异常极小
• 隐藏状态下的DOM元素执行Select2初始化会出现渲染失效问题

调整初始化时机，在第一个下拉框选中对应选项、元素显示后再执行Select2初始化，同时强制指定宽度参数，修改后完整代码如下：

<div x-data="{vervoerswijze:1, select2Init: false}">
  <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-effect="
      if(vervoerswijze == 2 && !select2Init) {
        $('.select2').select2({
          width: '100%' // 强制继承父容器宽度，解决宽度异常问题
        }).on('change', function(){
          @this.set('gebruikerinwagen', $(this).val());
        });
        select2Init = true;
      }
    "
  >
    <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>
// 原页面加载时对应动态Select2的初始化代码可删除，如果有其他全局非隐藏的Select2可保留
$(function(){
  // 其他非动态显示的Select2初始化逻辑写在这里
})
</script>

• x-effect会自动监听依赖的vervoerswijze值变化，当值为2且Select2未初始化时才执行初始化逻辑
• select2Init标记用来避免重复初始化Select2导致的异常
• 初始化参数width: '100%'是解决宽度极小问题的核心，强制让Select2继承父容器的100%宽度
• 保留wire:ignore属性，避免Livewire刷新DOM时覆盖Select2渲染的内容

内容的提问来源于stack exchange，提问作者Bervetuna