Toggle visibility of input fields based on the selected option in Alpine JS

I have a select option fields and I want to toggle the visibility of some input fields based on the selected option. I got to know that @click event doesn't work on <option> so is there a way to achieve this using @change on <select> or any other way.

<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>

Currently I implemented this on a radio button like this

<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>

Now I want to transform this into a selection.

JarekTkaczyk

3 years ago

Best Answer

Level 53

To toggle the visibility of some input fields based on the selected option in a element, you can use the @change event on the element and use the value of the selected option to show or hide the input fields.

Here's an example of how you can do this:

<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>

In this example, the x-show directive is used to show or hide the input fields based on the value of the gender variable. The @change event on the element updates the gender variable with the value of the selected option, which in turn updates the visibility of the input fields.

1 like

pjr

3 years ago

Level 3

@JarekTkaczyk Thank you very much. This is what I needed. I didn't know in x-show you can check conditions, I though you can only put variables which resolve as either true or false.

Please or to participate in this conversation.