Expand "bind:value <select>" tutorial with pre-selected option

[bluepuma77]

Describe the problem

The tutorial "use bind:value with elements" does not show how the input can be used to pre-select an option. Does that need to be done manually with setting selected in one of the options? Or does the binding have some smart way to do the pre-select automatically for easy two-way binding? Describe the proposed solution Expand the documentation Alternatives considered n/a Importance would make my life easier

[dummdidumm]

What do you mean by "pre-select an option"?

[bluepuma77]

let continent = 'na'

let continentValues = [
  { key:'eu', value:'Europe' },
  { key:'na', value:'North America' }
]

If I bind the select to continent, will it automatically set the selected option?

[Prinzhorn]

If I bind the select to continent, will it automatically set the selected option?

It took about 30 seconds to find out in REPL (the answer is yes, that's how the two way binding works. In both directions.)

https://svelte.dev/repl/a58cf1653f494b10b04abcda4a139844?version=3.46.6

The tutorial binds to the object as value, so you can do let selected = questions[2]; in line 8 to get the third one selected.

[dummdidumm]

I added a sentence to the "note" box from which it should be clear that you can do this. And as @Prinzhorn says, this is something that you can find out in no time. We need to find a good balance of what to put into the tutorial. If we cover every possibly ambiguity, the tutorial will be much harder to grasp for the majority of people.

[bluepuma77]

Thanks for the easy example @Prinzhorn. Somehow my solution did not work, but yours works great!

My only issue left is that the select field will be empty when a null value is supplied, even though there is no empty option?! That behaviour is different from normal plain select fields as they will just default to the first option. It happens only with Svelte routing, not on the first load from server, there the first option is in the select box.

Sadly it's not reproducible with your code in REPL. I will just set undefined values to "" or a default to make it work.

[Prinzhorn]

This is on purpose #6170 (discussion in #6126)

If you've found an inconsistency (multiple issues and edge cases have popped up after this was merged) then please open a new bug report with steps to reproduce.

[alanjohns735]

<select id="gender" name="gender" class="form-control"  required>  

                   <option value="none" selected disabled hidden>Choose your gender</option>
                   <option value="male">Male</option>
                   <option value="female">Female</option>
                   <option value="other">Other</option>
               </select>

DON'T KNOW MUCH AS I AM BEGINNER. DOES THIS WORK FOR THIS.....