<div>
 <div class="col-md-2">
 <h4>metronic select2 test</h4>

 <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true" id="select2_selectindex_1"
 @onchange="@((ChangeEventArgs __e) => SelectedValue = __e?.Value.ToString())">
 <option></option>
 @foreach (var item in Select2Data)
 {
 <option value="@item.Id">@item.Name</option>
 }
 </select>

 <span>Se&ccedil;im value: @(SelectedValue)</span>

 <button onclick="@(() => SetSelectIndex("select2_selectindex_1"))">JS SelectedIndex Change Event</button>

 </div>

@code {

private string SelectedValue { get; set; } = "2";
private List<DataItem> Select2Data { get; set; } = new();

void Select2Init()
{

 Select2Data = new List<DataItem>();
 Select2Data.Add(new DataItem() { Id = "1", Name = "Liste 1" });
 Select2Data.Add(new DataItem() { Id = "2", Name = "Liste 2" });
 Select2Data.Add(new DataItem() { Id = "3", Name = "Liste 3" });
 Select2Data.Add(new DataItem() { Id = "4", Name = "Liste 4" });
 Select2Data.Add(new DataItem() { Id = "5", Name = "Liste 5" });
 Select2Data.Add(new DataItem() { Id = "6", Name = "Liste 6" });
}

async void SetSelectIndex(string elementId)
{
 await js.InvokeVoidAsync("elementSelectedIndexFunction.selectElementById", $"{elementId}", 3);
}

}

*** JS Code ***

window.elementSelectedIndexFunction =
{
 selectElementById: function (elementById, indexValue) {
 var element = document.getElementById(elementById);

 if (element != null) {
 element.selectedIndex = indexValue;
 }
 },
}