根据 Alpine JS 中的选定选项切换输入字段的可见性答案

【问题标题】：Toggle visibility of input fields based on the selected option in Alpine JS根据 Alpine JS 中的选定选项切换输入字段的可见性
【发布时间】：2023-02-02 23:42:40
【问题描述】：

我有一个选择选项字段，我想根据所选选项切换某些输入字段的可见性。我知道 @click 事件在 <option> 上不起作用，所以有没有办法在 <select> 上使用 @change 或任何其他方式来实现此目的。

<div class="py-1" x-show="!open" x-transition>
    <span class="px-1 text-sm text-gray-600">Gender</span>
    <select @change="alert($el.value)" wire:model="gender">
        <option>Select Gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>

目前我在这样的单选按钮上实现了这个

<div class="form-check">
    <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-[#60D619] checked:border-[#60D619] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" id="figurativeMarkWithWords" wire:model="tradeMarkType" @click="isFigurativeMark = true; isWordMark = true" value="figurativeMarkWithWords">
    <label class="form-check-label inline-block px-1 text-sm text-gray-600" for="figurativeMarkWithWords">
        Figurative Mark containing words
    </label>
</div>

现在我想把它变成一个选择。

【问题讨论】：

标签： javascript laravel alpine.js

【解决方案1】：

您可以像这样将 x-show 绑定到下拉列表中的选定值。无需监听更改事件。

<div x-data="{ country: '' }">
    <div x-show="country == 'US'" x-cloak>
        Show this when US is selected in dropdown.
    </div>
    <div x-show="country != 'US' && country != ''" x-cloak>
        Show this when another country or nothing is selected in dropdown.
    </div>

    <div>
        <label>Country*</label>
        <select id="country" x-model="country">
            <option>Choose a country</option>
            <option value="US">USA</option>
            <option value="CA">Canada</option>
        </select>
    </div>
</div>

【讨论】：