0 minutes, 12 seconds

Alpine Test XSHOW Select Menu with List

<div x-data="data()">
    <input type="hidden" :value="selected.value">
    <button x-on:click="optionsVisible = !optionsVisible">Click</button>
    <div x-show="optionsVisible">
        <template x-for="option in options">
            <a x-on:click.prevent="selected = option; optionsVisible = false" x-text="option.label"
               style="display: block;"></a>
        </template>
    </div>
    <p>Selected option: <span x-text="selected.label"></span></p>
</div>

Selected option:

Previous Next