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

wnavrhmk 于 2022-12-17 发布在 Java

关注(0)|答案(1)|浏览(141)

我有一个选择选项字段，我想根据选定的选项切换一些输入字段的可见性。我知道@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

来源：https://stackoverflow.com/questions/74812099/toggle-visibility-of-input-fields-based-on-the-selected-option-in-alpine-js

1条答案

按热度按时间

nxowjjhe1#

要根据元素中的选定选项切换某些输入字段的可见性，可以使用元素上的@change事件，并使用选定选项的值来显示或隐藏输入字段。
下面是一个示例，说明如何执行此操作：

<div class="py-1" x-show="gender === 'male'" x-transition>
    <!-- input fields that should only be visible when the gender is male -->
</div>

<div class="py-1" x-show="gender === 'female'" x-transition>
    <!-- input fields that should only be visible when the gender is female -->
</div>

<div class="py-1" x-show="gender === 'other'" x-transition>
    <!-- input fields that should only be visible when the gender is other -->
</div>

<div class="py-1">
    <span class="px-1 text-sm text-gray-600">Gender</span>
    <select @change="gender = $event.target.value" wire:model="gender">
        <option>Select Gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
    </select>
</div>

字符串
在此示例中，x-show指令用于根据gender变量的值显示或隐藏输入字段。元素上的@change事件使用所选选项的值更新gender变量，从而更新输入字段的可见性。
Source

赞(0）回复(0）举报 2022-12-17

我来回答

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

1条答案

相关问题

热门标签

最新问答