CODEWITHSUNDEEP
c#razorblazor
AlbatrossCafe
AlbatrossCafe

Reputation: 1842

Value not being bound to selected option in Select Menu

I have a <select> control on my Blazor page with 3 options. I am setting selected on the option of "Bear". If the user does not touch the <select> control, I want the bound value to equal "Bear".

However, what I notice is that it only updates the bound value to what I select AFTER I update the <select> control. How do I force it to take the selected value when the <select> component is never touched?

<select @bind="selectedValue">
    <option value="Apple">Apple</option>
    <option selected="selected" value="Bear">Bear</option>
    <option value="John Cena">John Cena</option>
</select>

<h3>Selected Value: @selectedValue</h3>

@code {

    string selectedValue;
}

Apprently, Blazor Fiddle exists: https://blazorfiddle.com/s/d3flx9tc

Upvotes: 0

Views: 432

Answers (1)

enet
enet

Reputation: 45626

Just assign the value "Bear" to selectedValue, like the following:

string selectedValue = "Bear";

And remove the attribute selected="selected"

Now, "Bear" is selected, and the variable selectedValue contains the string "Bear". This is how you should initialize your elements.

Incidentally, you should use only selected without ="selected". It is meaningless. You could use selected="DoNotSelectMe", and it will still work

Upvotes: 1

Related Questions