refresh options in select element

[vujovicigor]

I have <select> input, with selected value binded and populated.
When "option" array is loaded via ajax, svelte can't show selected item from list:

repl: https://svelte.dev/repl/535db77a84dd40f69a06f3f9308f66f7?version=3.4.2

[Cleecanth]

Not sure I fully understand the issue, I believe you just need to add bind:value to your select element.

You may also want to make sure the selection is updated after the ajax call (via selected attribute).

Should look something like this:

<select bind:value>
	<option value=null selected disabled>pick</option> 
	{#each items as item}
		<option value={item} selected={value === item}>{item}</option> 
	{/each}
</select>

It's possible that selected bit is a bug though? Not sure.

[vitalets]

I had the same problem and can confirm that setting additionally selected={value === item} fixes it.
This point is missed in select bindings tutorial. From docs it seems like setting <select bind:value={selected}> is enough, but that's not work for dynamic selects.

[Conduitry]

I do think there's a bug here, but I also think that having the first placeholder-y option have selected hardcoded on it is probably not a good idea. I'm not sure what browsers do when there are multiple <option>s with selected on them. Perhaps it should be a compile-time error to specify selected on an <option> when it's inside a <select> whose value is either one- or two-way-bound?

Without this complication though, it does still seem like the appropriate option should be selected when the contents of the <select> are updated, and that's not happening now.

[vitalets]

Agree this is a bug and it would be great if <select> work without extra selected attribute in options 👍

[Conduitry]

Actually, looks like this is a duplicate of #1764, closing.

[oscaralderete]

Is there any solution for this bug on April 5, 2023?
In my case the async load of tag select options works fine. This tag select is also binded to a dynamically loaded variable. Even more, it works perfect on localhost, the problem is when I upload the transpiled/compiled js file to the server. In that case the select doesn't work!!!! (actually I have 2 selects)
I tried adding: selected={record.id === recordID} in the {#each} loop but nothing happens...
I uploaded a video you can watch:
https://www.youtube.com/watch?v=rXbYAgwswss&ab_channel=OscarAlderete
The first part of the video is the localhost capture, go to 1:46m to see how it fails in remote.

Naviera assignN(e.target, 0)} required > -- Naviera -- {#each shippinglinerRates as i} {i.nombre} {/each}

I need to highlight that in localhost my code works fine even without this extra code:
selected={costsSliImport.tlp_shippingliner_id == i.id}

I've added that for production but it still doesn't work!

I have cast the variables to avoid data type inconsistencies but nothing happens...