Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

masokky's avatar

masokky wrote a reply+100 XP

5mos ago

I've solved this issue manually parsing component.lastFreshHtml property in Livewire.hook, every time you change the choices livewire will return the generated HTML, we have to parse the options and assign them to ChoicesJs.
I am using Livewire 2 by the way, I don't know this code will work with Livewire 3 or not. I haven't tried it.

Here's my code

Livewire.hook('message.processed', (message, component) => {
            const officeField = $('#office');
            const parser = new DOMParser();
            const doc = parser.parseFromString(component.lastFreshHtml, 'text/html');
            const options = doc.querySelectorAll('#office option');

            const choices = Array.from(options)
                .map(opt => ({
                    value: opt.value,
                    label: opt.textContent.trim(),
                    selected: opt.hasAttribute('selected')
                }));

            officeField.clearStore();

            officeField.setChoices(choices, 'value', 'label', true);
        });