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

通过这种方式，你可以实现这个目标，类似的事情已经完成 here ，如果你想，请参考，

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

3 个答案: