html.dropdownlist MVC下拉列表中的字体预览

本文关键字：字体 dropdownlist MVC 下拉列表 html | 更新日期: 2023-09-27 18:01:01

我想实现一个下拉列表，它实际上显示所选字体类型的预览。例如，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"}
                     }) %>

任何帮助都非常感谢！！非常感谢。

html.dropdownlist MVC下拉列表中的字体预览

试试这个：

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

假设您有这个跨度(用于预览(：

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

您的jquery代码是：

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

就这样！希望这能有所帮助。干杯

我猜在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

通过这种方式你可以实现这一点，类似的事情也被执行这里，如果您愿意，请参阅

相关文章：