AlpineJS下拉选项事件失效：Laravel Blade中切换元素显示问题

在Laravel项目的Blade模板中结合AlpineJS开发时，编写了以下代码：期望通过选择下拉选项切换日期输入区域的显示，但绑定在上的点击事件完全不生效，日期区域始终隐藏。

<div class="form-group" x-data="{ show:false }">
    <div class="col-md-12">
        <div class="form-group">
            <span class='text-danger'>*</span>
            <label>Date Format</label>
            <select class="form-control select2" name="">
                <option value="auto" x-on:click="show = false">Auto</option>
                <option value="manually" x-on:click="show = true">Choose Manually</option>
            </select>
        </div>
    </div>
    
    <div x-show="show">
        <div class="col-md-12">
            <div class="form-group">
               <label>Date</label>
               <input type="text" class="form-control datepicker" name="start_date">
            </div>
        </div>
        ...
    </div>
</div>

问题原因 #

1. 点击事件兼容性限制：大部分浏览器不会触发<option>元素的click事件，这是原生HTML的行为特性，和AlpineJS无关。
2. Select2插件的DOM替换：你给select添加了select2类，Select2会完全替换原生的<select>为自定义DOM结构，原生<option>的事件根本不会被触发。

解决方案 #

方案1：原生Select（不使用Select2） #

直接给<select>绑定change事件，根据选中的值判断是否显示区域：

<div class="form-group" x-data="{ show: false }">
    <div class="col-md-12">
        <div class="form-group">
            <span class='text-danger'>*</span>
            <label>Date Format</label>
            <!-- 给select绑定change事件，通过选中值更新show状态 -->
            <select class="form-control" name="" @change="show = $event.target.value === 'manually'">
                <option value="auto">Auto</option>
                <option value="manually">Choose Manually</option>
            </select>
        </div>
    </div>
    
    <div x-show="show">
        <div class="col-md-12">
            <div class="form-group">
               <label>Date</label>
               <input type="text" class="form-control datepicker" name="start_date">
            </div>
        </div>
        ...
    </div>
</div>

方案2：结合Select2使用 #

因为Select2会替换原生select，需要监听Select2自身的change事件来更新AlpineJS的状态：

<div class="form-group" x-data="{ 
    show: false, 
    initSelect2() {
        // 初始化Select2并绑定change事件
        $(this.$el).find('select').select2().on('change', (e) => {
            this.show = e.target.value === 'manually';
        });
    } 
}" x-init="initSelect2()">
    <div class="col-md-12">
        <div class="form-group">
            <span class='text-danger'>*</span>
            <label>Date Format</label>
            <select class="form-control select2" name="">
                <option value="auto">Auto</option>
                <option value="manually">Choose Manually</option>
            </select>
        </div>
    </div>
    
    <div x-show="show">
        <div class="col-md-12">
            <div class="form-group">
               <label>Date</label>
               <input type="text" class="form-control datepicker" name="start_date">
            </div>
        </div>
        ...
    </div>
</div>

说明：

• x-init用来在组件初始化时执行Select2的初始化逻辑
• 通过jQuery监听Select2的change事件，直接修改AlpineJS的show变量，触发x-show的状态更新

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