我有一个选择选项字段,我想根据选定的选项切换一些输入字段的可见性。我知道@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>
现在我想把它转换成选区。
1条答案
按热度按时间nxowjjhe1#
要根据元素中的选定选项切换某些输入字段的可见性,可以使用元素上的
@change
事件,并使用选定选项的值来显示或隐藏输入字段。下面是一个示例,说明如何执行此操作:
字符串
在此示例中,
x-show
指令用于根据gender变量的值显示或隐藏输入字段。元素上的@change
事件使用所选选项的值更新gender变量,从而更新输入字段的可见性。Source