X-Model on select not binding to 'value' on page start

[eddysantos]

Hello,

So, I have a typical select with the x-model attribute like so:

<select class="py-1 border-gray-400 block w-full" x-model="tripData.clientOrder.operationType">
              <option value="transfer">Cruce</option>
              <option value="linehaul">Viaje</option>
              <option value="drayage">Movimiento Local</option>
</select>

The thing is the alpine property is being bound to what is inside the tag, not what's specified on the [value] attribute.

If I change the selection, it correctly binds to the [value] attribute, but in some cases (most of them) the default selection is what's required.

Am I doing something wrong?

TIA!

[HugoDF]

This looks like it should work.

Note that when using x-for to generate the option's x-model by itself won't work (it's a quirk of the order in which x-model and x-for are evaluated)

In that case and in your case what would help is to bind the selected attribute like so:

<option x-bind:selected="tripData.clientOrder.operationType === 'transfer'" value="transfer">Cruce</option>
<option x-bind:selected="tripData.clientOrder.operationType === 'linehaul'" value="linehaul">Viaje</option>
<option x-bind:selected="tripData.clientOrder.operationType === 'drayage'" value="drayage">Movimiento Local</option>

[neil-cldagency]

If this isn't in the docs already, it would be great if we could get an official word on whether this is the correct technique from anyone (or @calebporzio if possible?) — I've just implemented similar (specifically with options populated using x-for) and tried every method to pre-set the select in the docs including x-model and bind, as well as ensuring the value types match, but it wasn't until I'd done the above (:selected="...") that the field began to show the initial option.

[tsundokul]

You could try something like

<select x-model="selected" x-init="$el.value='default value'">