Hi, I cannot change the index of select2 in javascript? An example was added as a video. How do I fix this situation?

https://drive.google.com/file/d/1fYAsiyZIx7ZusFrYkF0fOzfm8Im5in6K/view?usp=sharing

 

 
metronic select2 test

 
 
 @foreach (var item in Select2Data)
 {
 @item.Name
 }
 

 Seçim value: @(SelectedValue)

 JS SelectedIndex Change Event

 

@code {

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

void Select2Init()
{

 Select2Data = new List();
 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;
 }
 },
}