Предварительный просмотр шрифта в выпадающем списке для html.dropdownlist MVC

Question

Я хотел бы реализовать выпадающий список, который на самом деле показывает предварительный просмотр для типа выбранного шрифта. Например, Arial будет отображаться с текстом «Arial», но с шрифтом Arial. Есть идеи, как мне это сделать? Прямо сейчас мой код выглядит примерно так:

    <%=Html.DropDownList("ChartFont", new List<SelectListItem>
                     {
                        new SelectListItem{Text="Arial", Value = "Arial"}, 
                        new SelectListItem{Text="Calibri", Value = "Calibri"},
                        new SelectListItem{Text="Tahoma", Value = "Tahoma"},
                        new SelectListItem{Text="Verdana", Value = "Verdana"},
                        new SelectListItem{Text="Times New Roman", Value = "Times New Roman"}
                     }) %>

Любая помощь очень ценится, ребята! Спасибо!

Answer 1

Попробуйте это:

<script type="text/javascript">
    $(document).ready(function () {
        $("#ChartFont option").each(function () {
            $(this).css("font-family", $(this).val());
        });
    });
</script>

Answer 2

Если у вас есть этот диапазон (для предварительного просмотра):

<span id="preview"> Sample text </span>

Ваш код jquery будет:

$("#ChartFont").change(function(){
  var font = $(this).val();
  $("#preview").css("font-family", font);
});

И это все! Надеюсь это поможет. Приветствия

Answer 3

Я думаю, что в HTML выберите, опция не будет отображать шрифт в браузере, но вы можете применить шрифт к optgroup, поэтому поместите каждый параметр в другую optgroup (и сделайте его видимым false) и примените к нему шрифт (проверено на Chrome), затем визуализированный HTML выглядит как,

<select id="ddlFontDropDownList">
<optgroup style="display:none;font-family:Agency FB;">
<option value="Agency FB">Agency FB</option>
</optgroup>
<optgroup style="display:none;font-family:Arial;">
<option  value="Arial">Arial</option>
</optgroup>
----------
---------- and so on

Таким образом, вы можете достичь этого, аналогичная вещь сделана здесь , обратитесь, если хотите,