Question

I’ve been looking around and there’s really not much on how to make font previews (to show the text in the same font they’re selecting) in a dropdown list. Can anybody point me in the right direction? Thanks.

Answer 1

To offer an alternative to using only a select element, that will allow for styling the font, and applying other css, while updating a traditional select element for submission to the server/script:

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 Fiddle demo.

Notes:

1. This assumes that that the order of the li elements will be the same as the order of the option elements, since the option that becomes selected is chosen by index (of the li).

References:

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