JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<script src="http://exodecreations.com/jQuery/plugin/jqDropDown.jquery.js"></script>
<form autocomplete="off">
    <select id="s">
        <option disabled="" selected="" class="disabled">Select a country</option>
        <option value="albania">ALBANIA</option>
        <option value="andorra">ANDORRA</option>
        <option value="aruba">ARUBA</option>
        <option value="azerbaijan">AZERBAIJAN</option>
        <option value="bahrain">BAHRAIN</option>
        <option value="bangladesh">BANGLADESH</option>
        <option value="belgium">BELGIUM</option>
        <option value="bolivia">BOLIVIA</option>
        <option value="bulgaria">BULGARIA</option>
        <option value="canada">CANADA</option>
        <option value="croatia">CROATIA</option>
        <option value="cyprus">CYPRUS</option>
        <option value="czech_republic">CZECH REPUBLIC</option>
        <option value="denmark">DENMARK</option>
        <option value="egypt">EGYPT</option>
        <option value="finland">FINLAND</option>
        <option value="france">FRANCE</option>
        <option value="hungary">HUNGARY</option>
        <option value="iran">IRAN</option>
        <option value="iraq">IRAQ</option>
        <option value="kazachstan">KAZACHSTAN</option>
        <option value="kenya">KENYA</option>
        <option value="libya">LIBYA</option>
        <option value="lithuania">LITHUANIA</option>
        <option value="luxemburg">LUXEMBURG</option>
        <option value="morocco">MOROCCO</option>
        <option value="nigeria">NIGERIA</option>
        <option value="norway">NORWAY</option>
        <option value="oman">OMAN</option>
        <option value="paraguay">PARAGUAY</option>
        <option value="poland">POLAND</option>
        <option value="qatar">QATAR</option>
        <option value="romania">ROMANIA</option>
        <option value="russia">RUSSIA</option>
        <option value="saudi_arabia">SAUDI ARABIA</option>
        <option value="slovenia">SLOVENIA</option>
       ...

CSS

.ddContainer{
    margin-top:30px;
    text-align:center;
    position:relative;
    z-index:999
}

a.ddToggle{
    height:44px !important;
    width:479px !important;
    background-image:url("http://rodania.com/images/layout/bg-select.jpg");
    font-size:12px;
    color:#606a6a;
    text-decoration:none;
    line-height:44px;
    text-indent:20px;
    display:block;
    text-align:left;
    margin:0 auto;
    font-family:Arial,Helvetica,sans-serif;
    text-transform:uppercase;
    font-weight:bold;
    z-index:999
}

a[rel="Select a country"]{display:none}

.ddContainer ul{
    list-style:none;
    position:absolute;
    top:43px !important;
    left:211px;
    height:200px;
    overflow-y:scroll;
    width:477px !important;
    z-index:999;
    text-align:left;
    background-color:#fff;
    border:1px solid #e5e5e5
}

.ddContainer ul a{
    color:#606a6a;
    font-size:11px;
    text-transform:uppercase;
    text-decoration:none;
    display:block;
    padding:15px 15px 15px 15px !important;
    border-bottom:1px solid #e5e5e5;
    font-family:Arial,Helvetica,sans-serif
}

.ddContainer ul a:hover{background-color:#f1f1f1}

JavaScript

$("#s").jqDropDown({
    optionChanged: function(elem){sC();},
    placeholder: '#x' ,
    effect: 'fade', effectSpeed: 300
});

function sC(elem){
    var selectedVal = $('ul.ddOptionList').find('a.selected').text();
    $('#value').html(selectedVal);
}