How to bind selected option with the attribut in Svelte

Question

I have a svelte component where i want to connect a selected input with a declared attribute. My problem is that the binding of the selected value of status to the attribute'status' declared in 'flightschedules' doesnt work.

The options are from the attribute questions: on-time, delayed, cancelled Can somebody help me please ?

Here is my code (its a component to create form, e.g create a flightschedule):

<script>
    import axios from "axios";
    import { onMount } from "svelte";
    export let params = {};

    let flightschedule = {
        timeofdeparture: "",
        flightnumber: "",
        gatenumber: "",
        status: "",
        privatejetline_id: null,
    };

    let questions = [
        { text: "on-time" },
        { text: "delayed" },
        { text: "cancelled" },
    ];

    let selected;
    let privatejetline_ids = [];

    onMount(() => {
        getPrivateJetLineIds();
        selected = params.status;

    });

    function getPrivateJetLineIds() {
        axios
            .get("http://localhost:8080/flights/privatejetline")
            .then((response) => {
                privatejetline_ids = [];
                for (let privatejetline of response.data) {
                    privatejetline_ids.push(privatejetline.id);
                }
                flightschedule.privatejetline_id = privatejetline_ids[0];
            });
    }

    function addFlightSchedule() {
        axios
            .post("http://localhost:8080/flights/flightschedule", flightschedule)
            .then((response) => {
                alert("Flight Schedule added");
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
                alert(error);
            });
    }
</script>


<div class="mb-3">
    <label for="" class="form-label">Status</label>

    <select bind:value={flightschedule.status} class="from-select">
        <option value="" disabled>-- Select Status --</option>
        {#each questions as question}
        <option value={selected} selected={selected===flightschedule.status}>{question.text}</option>
        {/each}
    </select>
</div>

Answer 1

Actually, no need for selected variable, just bind the flightschedule.status. Try following in REPL.

<script>
    let flightschedule = {
        timeofdeparture: "",
        flightnumber: "",
        gatenumber: "",
        status: "",
        privatejetline_id: null,
    };

    let questions = [
        { text: "on-time" },
        { text: "delayed" },
        { text: "cancelled" },
    ];
    
    $: console.log('---->', flightschedule.status)
</script>



<div class="mb-3">
    <label for="" class="form-label">Status</label>

    <select bind:value={flightschedule.status} class="from-select">
        <option value="" disabled>-- Select Status --</option>
        {#each questions as question}
        <option value={question.text}>{question.text}</option>
        {/each}
    </select>
</div>

Answer 2

<option value={selected} this line can’t be right. You’re binding all three options to the same value.

You probably want following:

<select bind:value={selected} class="from-select">
        <option value="" disabled>-- Select Status --</option>
        {#each questions as question}
        <option value={question.text}>{question.text}</option>
        {/each}
</select>