<select>下拉列表中的字体预览？

Question

我一直环顾四周,有真的不多,就如何使字体预览(以显示他们选择相同的字体文本)在下拉列表中.任何人都能指出我正确的方向吗？谢谢.

Answer 1

要提供仅使用select元素的替代方法,这将允许样式化字体和应用其他css,同时更新传统select元素以提交到服务器/脚本:

HTML:

<form action="#" method="post">
    <select id="fontSelector" name="fontSelector">
        <option value="calibri">Calibri</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
</form>

<ul id="fontList">
    <li id="calibri" class="selected">Calibri</li>
    <li id="timesNewRoman">Times New Roman</li>
    <li id="comicSansMS">Comic Sans MS</li>
</ul>

jQuery的:

$('#fontList li').click(
    function(){
        var chosen = $(this).index();
        $('#fontSelector option:selected')
            .removeAttr('selected');
        $('#fontSelector option')
            .eq(chosen)
            .attr('selected',true);
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

JS小提琴演示.

笔记:

1. 这假设li元素的顺序将与元素的顺序相同option,因为option它变为selected由索引(of li)选择.

参考文献:

1. click().
2. index().
3. removeAttr().
4. eq().
5. attr().
6. removeClass().
7. addClass().