使用带有文化的语言选择器动态使用标志图标

Question

我正在使用选择语言下拉菜单，但我想为我支持的每个国家/地区的文化信息添加一个标志，无论如何使用标志图标动态添加标志

标志图标：https://github.com/lipis/flag-icon-css

@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options

@inject IViewLocalizer Localizer
@inject IOptions<RequestLocalizationOptions> LocOptions

@{
    var requestCulture = Context.Features.Get<IRequestCultureFeature>();
    var cultureItems = LocOptions.Value.SupportedUICultures
        .Select(c => new SelectListItem { Value = c.Name, Text = c.DisplayName })
        .ToList();
    var returnUrl = string.IsNullOrEmpty(Context.Request.Path) ? "~/" : $"~{Context.Request.Path.Value}";
}

<div title="@Localizer["Request culture provider:"] @requestCulture?.Provider?.GetType().Name">
    <form id="selectLanguage" asp-controller="MISObjects" asp-action="SetLanguage" asp-route-returnUrl="@returnUrl"
          method="post" role="form">
        <label asp-for="@requestCulture.RequestCulture.UICulture.Name">@Localizer["Language:"]</label> <select name="culture"
                                                                                                               onchange="this.form.submit();"
                                                                                                               asp-for="@requestCulture.RequestCulture.UICulture.Name" asp-items="cultureItems">
        </select>
    </form>
</div>

好的，我在下拉菜单中显示了图标，但它重复了语言 obv，因为它是从 asp-items 和 javascript 中获取的，但是如果我删除了 asp-items，它将无法工作。

<script>
   $(function () {
     //Initialize Select2 Elements
     $('.select2').select2()
     var isoCountries = [                    
        { id: 'FR', text: 'France' },
        { id: 'ES', text: 'Spain' },
        { id: 'GB', text: 'United Kingdom' },
        { id: 'US', text: 'United States' }                    
        ];

     function formatCountry(country) {
      if (!country.id) { return country.text; }
         var $country = $(
           '<span class="flag-icon flag-icon-' + country.id.toLowerCase() + ' flag-icon-squared"></span>' +
           '<span class="flag-text">' + country.text + "</span>"
         );
        return $country;
     };
     //Assuming you have a select element with name country
       $("[name='culture']").select2({
                autoWidth:true,
                placeholder: "Please Select a country",
                templateResult: formatCountry,
                data: isoCountries
            });
            $("#culture").select2({ dropdownCssClass: 'bigdrop' }); 


     });
</script>

Answer 1

$('select[name ="culture"] > option' ).each(function() {
   
     
    var country = $(
           '<span class="flag-icon flag-icon-' + country.id.toLowerCase() + ' flag-icon-squared"></span>' +
           '<span class="flag-text">' + country.text + "</span>"
         ); 
     $(this).html(country); 
     }  
});