JSFiddle - React, Tailwind, and code Playground

by ozzymcduff

HTML

<h1>JankoAtWarpSpeed demos</h1>
<h3>Demo no 2 for tutorial: <a href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx">Reinventing drop down with CSS and jQuery</a></h3>
<p class="desc">The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally .</p>
<select id="source">
    <option selected="selected" value="BR">Brasil</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
    <option value="IN">India</option>
    <option value="JP">Japan</option>
    <option value="RS">Serbia</option>
    <option value="UK">United Kingdom</option>
    <option value="US">United States</option>
</select>

CSS

body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
    border:1px solid #d4ca9a; width:160px; padding:5px;}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
    left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}

.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}

JavaScript

$(document).ready(function() {
    createDropDown();

    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown")) {
            $(".dropdown dd ul").hide();
        }
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a").html(text);
        $(".dropdown dd ul").hide();

        var source = $("#source");
        source.val($(this).find("span.value").html())
    });
});



function createDropDown() {
    var source = $("#source");
    var selected = source.find("option[selected]");
    var options = $("option", source);

    $("body").append('<dl id="target" class="dropdown"></dl>')
    $("#target").append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>')
    $("#target").append('<dd><ul></ul></dd>')

    options.each(function() {
        $("#target dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>');
    });
}