Alpine.js multi-select not working when using x-model with :selected

I'm facing an issue with an Alpine.js multi-select element.

when i use x-model on a select multiple along with a :selected binding on the option elements, i’m unable to select or change options in the multi-select.

<div class="col-12">
    <label class="form-label form-label-sm">
        Test Methods <span class="text-danger">*</span>
    </label>

    <select
        x-model="standard.test_methods_ids"
        class="form-control form-control-sm select2-test-methods"
        :data-uid="standard._uid"
        data-placeholder="Select Test Methods"
        multiple
        required
    >
        <template x-for="method in testMethods" :key="method.id">
            <option
                :value="method.id"
                :selected="standard.test_methods_ids.includes(method.id)"
                x-text="method.name"
            ></option>
        </template>
    </select>

    <div class="form-text">
        Selected:
        <code x-text="JSON.stringify(standard.test_methods_ids)"></code>
    </div>
</div>

form: {
    id: null,
    sample_category_id: '',
    related_entity_id: '',
    lab_test_method_id: '',
    standard_references: [
        {
            _uid: 'init_0',
            id: '',
            limit_criteria: '<',
            limit_value: '',
            unit_id: '',
            unit_text: '',
            test_methods_ids: []
        }
    ]
}

As soon as i add the :selected binding, the multi-select stops responding to user input.

Any help would be greatly appreciated. Thanks!

LaryAI

3 months ago

Level 58

This is a common issue when using Alpine.js (and other frameworks like Vue/React) with elements: you should not use both x-model and :selected (or selected) on the <option> elements in a multi-select. This causes conflicting two-way data bindings.

In Alpine.js, x-model is the only thing you need.
Alpine manages the selected values automatically. By manually binding :selected, you’re overriding/competing with x-model (and likely causing DOM patching issues on updates).

How to fix it:

Remove the :selected binding from the option element.
Just use x-model on the select. Here is your corrected code:

<select
    x-model="standard.test_methods_ids"
    class="form-control form-control-sm select2-test-methods"
    :data-uid="standard._uid"
    data-placeholder="Select Test Methods"
    multiple
    required
>
    <template x-for="method in testMethods" :key="method.id">
        <option
            :value="method.id"
            x-text="method.name"
        ></option>
    </template>
</select>

That’s it—no :selected on the <option>.

Alpine will handle binding the array (standard.test_methods_ids) to the selected options for you. When you initialize test_methods_ids (e.g. in your form object), any values present will be reflected as selected in the multi-select.

Summary:

Let Alpine manage selected options via x-model on <select> (with multiple attribute).
Do not use selected or :selected on <option> when using x-model.

References:

Alpine.js x-model Docs

Let me know if you need more help!

Please or to participate in this conversation.