Text bind:value is not working according to Select bindings - data-binding

Question

I need to input the value which i got it from selected option. If I select Tokyo, I need to input the code 1850147(CityCode of Tokyo) via bind:value. But my code didn't work that way. Help me fix this..
<script>
let cities = [
{
CityCode: "1248991",
CityName: "Colombo",
Temp: "33.0",
Status: "Clouds",
},
{
CityCode: "1850147",
CityName: "Tokyo",
Temp: "8.6",
Status: "Clear",
},
{
CityCode: "2644210",
CityName: "Liverpool",
Temp: "16.5",
Status: "Rain",
},
{
CityCode: "2988507",
CityName: "Paris",
Temp: "22.4",
Status: "Clear",
},
{
CityCode: "2147714",
CityName: "Sydney",
Temp: "27.3",
Status: "Rain",
},
{
CityCode: "4930956",
CityName: "Boston",
Temp: "4.2",
Status: "Mist",
},
{
CityCode: "1796236",
CityName: "Shanghai",
Temp: "10.1",
Status: "Clouds",
},
{
CityCode: "3143244",
CityName: "Oslo",
Temp: "-3.9",
Status: "Clear",
},
];
let selected;
function handleSubmit() {
alert(
`Chosen city ${selected.CityCode}`
);
}
</script>
<h2>Choose City from here</h2>
<form on:submit|preventDefault={handleSubmit}>
<select bind:value={selected}>
{#each cities as city}
<option value={city}>
{city.CityName}
</option>
{/each}
</select>
<button type="submit"> Submit </button>
</form>
<input type="text" bind:value={selected.CityCode}>
When I select an option and hit the submit button, It was correctly shown on alert but input type has not been changed according to what I selected previously... What's wrong with my code?

Answer 1

I can't quite tell what you're trying to accomplish because binding a value in two different places will become hard to work with. Binding means two-way updates. You're binding to selected, which is a variable (great!), but then you are also binding to selected.CityCode which is not a variable. If you want to just pass the value, you can do
<input type="text" value={selected.CityCode}>
If you still want the input to be bound, you can pass the value as you submit, like so:
<script>
let cities = [
{
CityCode: "1248991",
CityName: "Colombo",
Temp: "33.0",
Status: "Clouds",
},
{
CityCode: "1850147",
CityName: "Tokyo",
Temp: "8.6",
Status: "Clear",
},
{
CityCode: "2644210",
CityName: "Liverpool",
Temp: "16.5",
Status: "Rain",
},
{
CityCode: "2988507",
CityName: "Paris",
Temp: "22.4",
Status: "Clear",
},
{
CityCode: "2147714",
CityName: "Sydney",
Temp: "27.3",
Status: "Rain",
},
{
CityCode: "4930956",
CityName: "Boston",
Temp: "4.2",
Status: "Mist",
},
{
CityCode: "1796236",
CityName: "Shanghai",
Temp: "10.1",
Status: "Clouds",
},
{
CityCode: "3143244",
CityName: "Oslo",
Temp: "-3.9",
Status: "Clear",
},
];
let selected;
let input;
function handleSubmit() {
alert(`Chosen city ${selected.CityCode}`);
input = selected.CityCode;
}
</script>
<h2>Choose City from here</h2>
<form on:submit|preventDefault={handleSubmit}>
<select bind:value={selected}>
{#each cities as city}
<option value={city}>
{city.CityName}
</option>
{/each}
</select>
<button type="submit"> Submit </button>
</form>
<input type="text" bind:value={input}>