1. Models:

    public class Test
    {
        public SelectList timeZones { get; set; } = new SelectList(Helper.Get_TimeZones(), "Value", "Text");
        public string timeZone { get; set; } = "";
    }

    public static class Helper
    {
        public static IEnumerable Get_TimeZones()
        {
            List<SelectListItem> list = new List<SelectListItem>();

            ReadOnlyCollection<TimeZoneInfo> timeZones = TimeZoneInfo.GetSystemTimeZones();
            list.Add(new SelectListItem() { Value = "", Text = "" });
            foreach (TimeZoneInfo timeZone in timeZones)
            {
                list.Add(new SelectListItem() { Value = timeZone.Id, Text = timeZone.DisplayName });
            }
            return list;
        }
    }

2. Index.cshtml

@model WebApplication3.Models.Test
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
 <div class="row">
         <div class="col-6 mb-2">
                  <label class="form-label" for="">Timezone</label>
                   <div class="input-group input-group-merge">
                           @Html.DropDownListFor(x => x.timeZone, Model.timeZones, new { @id="timeZones", @class= "form-select" })
                    </div>
                    <span asp-validation-for="timeZones" class="text-danger"></span>
       </div>
 </div>

 @section Scripts{
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#timeZones").select2();
            });
        </script>
 }