Select dynamic options default not working #2697

FXNeoCube · 2022-02-25T08:55:31Z

FXNeoCube
Feb 25, 2022

If you set dynamic parameters, the preset values do not work.
"Orange" is output, but "Red" is specified in Select
How do I make it work? Or does Alpine JS not support this?

<div x-data="{color: 'Orange'}">
    <select x-model="color" >
        <template x-for="color in ['Red', 'Orange', 'Yellow']">
            <option x-text="color"></option>
        </template>
    </select>
    Colors: <span x-text="color"></span>
</div>

FXNeoCube · 2022-02-25T09:06:38Z

FXNeoCube
Feb 25, 2022
Author

The problem is solved.

<div x-data="{selected: 'Orange'}">
    <select x-model="selected" >
        <template x-for="color in ['Red', 'Orange', 'Yellow']">
                <option x-text="color" :selected="color == selected"></option>
        </template>
    </select>
    Colors: <span x-text="selected"></span>
</div>

0 replies

docdunning · 2024-02-08T14:12:27Z

docdunning
Feb 8, 2024

:selected="color == selected"

Yes, but to my mind, that's a workaround. Alpine's handing of x-model in a select is inconsistent :-(

If the select is hardwired in the HTML, then x-model works OK and the default value is properly selected.

If the select options are created in an x-for loop, then none of them is pre-selected. The control and its x-model are immediately out of sync.

See the demo page below. Both selects should have the 'Red' option selected. The first select is created dynamically, and shows 'Orange' (the first option). The second select is hardcoded, and works as you would expect, with 'Red' selected.

This feels like a defect to me, given that the behaviour is just not what you would expect, but I'll see what other people think ...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{
  color: 'Yellow',
  color2: 'Red',
}">
<p>
  <select x-model="color">
    <template x-for="c in ['Red', 'Orange', 'Yellow']" :key="c">
        <option :value="c"><span x-text="c"></span></option>
    </template>
  </select>
  Color: <span x-text="color"></span>
</p>
<p>
  <select x-model="color2">
    <option value="Orange">Orange</option>
    <option value="Yellow">Yellow</option>
    <option value="Red">Red</option>
  </select>
  Color2: <span x-text="color2"></span>
</p>
</div>
</body>
</html>

4 replies

ekwoka Feb 9, 2024

I'm not sure to what degree this can be handled in Alpine...

as it's related to the behavior of the element itself. It doesn't let you set a value that it doesn't have an option for. I guess, at most we could queue the value setting to a microtask on select elements?

docdunning Feb 9, 2024

It doesn't let you set a value that it doesn't have an option for

Yes, that makes sense. The problem is only on the initial pass - after that everything is fine.

The :selected="color == selected" approach taken by @FXNeoCube works OK, but it just feels a little untidy to be continually updating the DOM attribute when the bound value changes.

Here's an alternative, using the select's x-init event with nextTick. I prefer this because it makes it a one-time process. Maybe this is the same as your suggestion for a microtask - although that's beyond my experience.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{
  color: 'Red',
}">
<p>
  <select x-model="color" x-init="$nextTick(() => $el.value = color )">
    <template x-for="c in ['Orange', 'Yellow', 'Red']" :key="c">
        <option :value="c" x-text="c"></option>
    </template>
  </select>
  Color: <span x-text="color"></span>
</p>
</div>
</body>
</html>

ekwoka Feb 9, 2024

yes. nextTick just does it on the next frame. similar thing.

SimoTod Feb 9, 2024
Collaborator

I suppose someone could just send a PR for x-model. If tag is select set the value with a micro task or something like that

ljk0071 · 2025-12-19T16:41:30Z

ljk0071
Dec 19, 2025

For anyone struggling with cascading selects not updating x-model, here is a "set and forget" solution. It uses a custom directive to watch for DOM changes in the options and forces a refresh.

   document.addEventListener('alpine:init', () => {
        Alpine.directive('watch-options', (el, {}, {cleanup, evaluate}) => {
            const observer = new MutationObserver(() => {
                const modelName = el.getAttribute('x-model');
                if (modelName) {
                    const currentValue = evaluate(modelName);
                    const values = Array.from(el.options).map(opt => opt.value);

                    if (!values.includes(currentValue)) el.dispatchEvent(new Event('change', {bubbles: true}))
                    else if (el.value !== currentValue) el.value = currentValue
                }
            });

            observer.observe(el, {childList: true, subtree: true});

            cleanup(() => observer.disconnect());
        });
    });

0 replies

ivangusev · 2025-12-20T20:46:25Z

ivangusev
Dec 20, 2025

Triggering change doesn't solve the problem when x-for is used. Here is correctly working solution:

Alpine.directive('monitor-options', (el, { expression }, { evaluate, cleanup }) => {
        const observer = new MutationObserver(() => {
            // 1. Get the name of the variable bound to x-model (e.g., "selectedValue")
            const modelName = el.getAttribute('x-model');
            
            // 2. If x-model exists, grab the current value from Alpine data
            if (modelName) {
                const currentValue = evaluate(modelName);
                
                // 3. Force the select box to match that value immediately
                // This overrides the browser trying to select the first option
                if (currentValue !== undefined) {
                    el.value = currentValue;
                }
            }
        });

        observer.observe(el, { childList: true, subtree: true });

        cleanup(() => observer.disconnect());
    });

0 replies

ljk0071 · 2025-12-21T04:52:48Z

ljk0071
Dec 21, 2025

i wonder what case u solve problem using by that code.

in my case, ur code is not working.

7 replies

ivangusev Dec 22, 2025

there are multiple select boxes and the value of the first select box changes the options of the second one

If you are talking about initial value of first select box then still no need to trigger change event. Here is example of second select box:
<template x-for="state in availableStates">
where availableStates is a function like:

get availableStates() {
    return this.countries[this.selectedValue];
},

This works fine because selectedValue you set in x-data.
While my code above for monitor-options you would need if you want also to set initial value for second select box.

That case can already be handled with something like :selected="r.id === region".

Yes, but it's a trick, while monitor-options is a fix of alpinejs timing issue.

ljk0071 Dec 22, 2025

Hmm… what I’m talking about is this case:

When the value of the first select box changes, the options of the second select box are updated.
At that point, if the value bound to the second select box via x-model does not exist in the newly updated options, none of the options becomes selected.

In this situation, what the user sees are the new options, but the x-model value does not follow any of the options currently rendered on the page.
So visually the options have changed, but the state held by x-model is out of sync with what’s actually displayed.

ivangusev Dec 22, 2025

Just do like this:

<select x-model="selectedValue" @change="onCountryChange()"
onCountryChange() {
            this.state = ''; // reset value of second select box
        },

ljk0071 Dec 22, 2025

i know that is work. but i dont think that is right way

ivangusev Dec 22, 2025

It seems correct, non-tricky way for cascade select boxes.

Uh oh!

Select dynamic options default not working #2697

Uh oh!

Replies: 5 comments · 11 replies

Uh oh!

FXNeoCube Feb 25, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SimoTod Feb 9, 2024 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 11 replies

FXNeoCube
Feb 25, 2022
Author

SimoTod Feb 9, 2024
Collaborator