web-dev-qa-db-ja.com

Blazor選択ドロップダウンセットアクティブ値をコードで

リストのコンテンツに基づいて、ドロップダウンリストの値を動的に入力しています。ドロップダウンの項目を選択すると、この項目を削除するオプションが表示されます。アイテムが削除されると、最初にリストから削除され、次にドロップダウンリストが再構築されます。ここで問題が発生します。ドロップダウンを再構築するときにドロップダウンをデフォルト値に戻す代わりに、削除された値のすぐ下の値が選択されたものとして表示されます（これは、@ 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ループ（seかみそりコード）を使用して、リスト内のアイテムから構築されます。

  3. ドロップダウンから項目が選択されると、これによりselectedValue（）関数が実行され、値とSelectedValue文字列が変更されます。

  4. 選択したアイテムがアイテムのリストから削除されます

  5. ドロップダウンは、モード化されたリストを使用して再構築されます

  6. 選択されたアイテムは、削除されたアイテムのすぐ下のアイテムに設定されます。これは、onchangeを実行せずに行われます。これが問題です

  7. ドロップダウンの選択された値は、SelectedValue文字列の値に対応していません。

これはおそらく要素をデフォルトのオプション/値に設定することで解決できますが、これを行う方法がわかりません。

選択した値をデフォルトのオプションに変更するにはどうすればよいですか（私の場合、値が ""の "1つ選択"オプションドロップダウンリストの=？

drop-down-menuhtml-selectonchangeblazorblazor-server-side
2
user10483669

選択した値をドロップダウンリストの既定のオプション（私の場合は "値を1つ選択する"オプション）に変更するにはどうすればよいですか？

次のように、JSInteropでのみ実行できます。

一般的に、select要素のオプションを選択すると、select要素のselectedIndexプロパティが0に設定されます。これは、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.cshtmlファイルに入れます。

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

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