Blazor select dropdown set active value by code

user_10483669 0
Viewed 11906

I am dynamicaly filling the values of a dropdown list based of the content of a List. when a item in the dropdown is selected an option to remove this item is shown. When the item is removed, it is first removed from the list and then the dropdown list is rebuilt, this is where I run in to problems. Instead of returning the dropdown to its default value when it is rebuilt the value just below the removed one is shown as selected (this happens whitout the @onchange value being triggered). How can i make the dropdown list return to its default value when it is being rebuilt?

here is some code, Razor code:

<select class="form-control" @onchange="selectedValue">
   <option value="">select one</option>
   @foreach (var mod in values)
   {
        <option value="@mod.Id">@mod.Name</option>
   }
</select>

the class named Items that is populationg the list:

public class Items
{
    public string Name { get; set; }
    public int Id { get; set; }
    public Items(string name, int id)
    {
        Name = name;
        Id = id;
    }
}

the list itself (before it is populated):

public List<Items> itm = new List<Items>();

the function thats called onchange:

public string SelectedValue = "";
public void selectedValue(ChangeEventArgs selectEvent)
{
    SelectedValue = selectEvent.Value.ToString();
}

so to sum it up, this is what's happening:

  1. the list is pupolated with Items.

  2. the select list is built of the items in the list using a @foreach loop (se razor code).

  3. an item is selected from the dropdown, this runs the selectedValue() function and changes the value ud the SelectedValue string.

  4. the selected item is deleted from the list of items

  5. the dropdown is rebuilt using the modefied list

  6. the selected item is now set to the one directly below the deleted item, this is happening without onchange being run. this is the problem

  7. Now the selected value of the dropdown don't correspond to the one of the SelectedValue string.

this can probably be solved by setting the element to its default option/value, but i can't figure out how to do this.

How can I change the selected value to be the default option (in my case the "select one" option with value "") of my dropdown list?

onchange blazor-server-side blazor html-select drop-down-menu
2 Answers

How can I change the selected value to be the default option (in my case the "select one" option with value "") of my dropdown list?

I'm afraid you can do it only with JSInterop as follows:

Generally speaking, the selectedIndex property on the select element is set to 0 after you select an option in the select element. This is done in the selectedValue method...

This is a complete working code snippet. Run it and test it...

@page "/"

<select @ref="myselect" id="myselect" class="form-control"
        @onchange="selectedValue">
    <option selected value="-1">select one</option>
    @foreach (var item in items)
    {
        <option value="@item.ID">@item.Name</option>
    }
</select>

<p>@SelectedValue</p>

@code {
    [Inject] IJSRuntime JSRuntime { get; set; }
    private ElementReference myselect;

    List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { 
        Name = $"Name {i.ToString()}", ID = i }).ToList();

    public string SelectedValue = "";

    public void selectedValue(ChangeEventArgs args)
    {
        SelectedValue = args.Value.ToString();
        var item = items.Single(item => item.ID == Convert.ToInt32(SelectedValue));
        items.Remove(item);

        JSRuntime.InvokeVoidAsync("exampleJsFunctions.selectElement", myselect);
    }

    public class Item
    {
        public string Name { get; set; }
        public int ID { get; set; }
    }
}

Put the following JS code in the _Host.cshtml file:

<script src="_framework/blazor.server.js"></script>
<script>
    window.exampleJsFunctions =
    {
        selectElement: function (element) {
            element.selectedIndex = 0;
        }
    };
</script>
user_61528910

I was having a similar issue. I solved it by putting an if statement in the loop that generates the option elements and from there conditionally add the selected attribute, i.e.;

<select @onchange="listChanged">
    @foreach (var item in PageModel.Lists)
    {
        if(item.Id == currListId)
        {
            <option value="@item.Id" selected>@item.Name</option>
        }
        else
        {
            <option value="@item.Id">@item.Name</option>
        }
    }
</select>

Sorry for not taking the time to adapt my code to your situation, but you've already solved your problem. This is for anyone else that comes across this problem (prolly me next time i need to do something like this, lol).

user_28160570
Related