Blazor выбрать раскрывающийся список установить активное значение по коду - PullRequest
Новая
       36

Blazor выбрать раскрывающийся список установить активное значение по коду

1 голос
/ 09 марта 2020

Я динамически заполняю значения раскрывающегося списка на основе содержимого списка. когда выбран элемент в раскрывающемся списке, отображается опция удаления этого элемента. Когда элемент удаляется, он сначала удаляется из списка, а затем перестраивается в раскрывающемся списке, где я сталкиваюсь с проблемами. Вместо того, чтобы возвращать раскрывающийся список к его значению по умолчанию, когда он перестраивается, значение чуть ниже удаленного отображается как выбранное (это происходит без запуска значения @onchange) . Как я могу сделать, чтобы раскрывающийся список возвращался к его значению по умолчанию, когда он перестраивается?

вот некоторый код, код Razor: 

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

класс с именем Items, который заполнен в списке : 

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

сам список (до его заполнения): 

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

функция, которая вызвала onchange: 

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

, чтобы суммировать его, это то, что происходит:

  1. список околдован элементами.

  2. список select составлен из элементов в списке с помощью @foreach l oop (код бритвы) .

  3. элемент выбирается из выпадающего списка, при этом запускается selectedValue () и изменяет значение в строке SelectedValue.

  4. выбранный элемент удаляется из списка элементов

  5. выпадающий список перестраивается с использованием модернизированного списка

  6. выбранный элемент теперь настроен на тот, который находится непосредственно под удаленным элементом. без посторонней помощи. это проблема

  7. Теперь выбранное значение раскрывающегося списка не соответствует значению из строки SelectedValue.

это может быть вероятно решить проблему, установив для элемента значение / значение по умолчанию, но я не могу понять, как это сделать.

Как изменить выбранное значение на значение по умолчанию (в моем случае опция "выбрать один" со значением "") из моего выпадающего списка?

1 Ответ

1 голос
/ 09 марта 2020

Как я могу изменить выбранное значение, чтобы оно было опцией по умолчанию (в моем случае это опция "выбрать одну" со значением "") моего выпадающего списка?

Я боюсь, что вы можете сделать это только с JSInterop следующим образом:

Вообще говоря, свойство selectedIndex элемента select устанавливается в 0 после выбора параметра в элементе select. Это делается с помощью метода selectedValue ...

Это полный рабочий фрагмент кода. Запустите его и протестируйте ... 

@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; }

}
}

Поместите следующий код JS в файл _Host.cs html: 

 <script src="_framework/blazor.server.js"></script>
<script>

    window.exampleJsFunctions =
    {
        selectElement: function (element) {
            element.selectedIndex = 0;
        }
    };
</script>
...