JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<dl class="dd-ck-select-spv"> <dt>
    <a href="#">
      <span class="select-default">- - Select few options - -</span>    
      <span class="n-select"></span>  
    </a>
    </dt>

    <dd>
        <div class="n-select-main">
            <ul>
                <li>
                    <input type="checkbox" value="Apple" />Apple</li>
                <li>
                    <input type="checkbox" value="Blackberry" />Blackberry</li>
                <li>
                    <input type="checkbox" value="HTC" />HTC</li>
                <li>
                    <input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
                <li>
                    <input type="checkbox" value="Motorola" />Motorola</li>
                <li>
                    <input type="checkbox" value="Nokia" />Nokia</li>
            </ul>
        </div>
    </dd>
</dl>

CSS

.dd-ck-select-spv dd, .dd-ck-select-spv dt {
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv ul {
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv dd {
    position:relative;
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv a, .dd-ck-select-spv a:visited {
    color:#fff;
    text-decoration:none;
    outline:none;
    margin:0px;
    padding:0px;
    min-height: 30px;
    border-radius: 3px;
}
.dd-ck-select-spv dt a {
    background-color:#4F6877;
    display:block;
    overflow: hidden;
    width:100%;
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv dt a span, .n-select span {
    cursor:pointer;
    display:inline-block;
    margin:0px;
    padding:5px 10px;
}
.dd-ck-select-spv dd ul {
    background-color: #4F6877;
    top:1px;
    color:#fff;
    display:none;
    position:absolute;
    width:100%;
    list-style:none;
    height: 100px;
    overflow: auto;
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv span.value {
    display:none;
    border-radius: 3px;
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv dd ul li a {
    display:block;
    margin:0px;
    padding:0px;
}
.dd-ck-select-spv dd ul li a:hover {
    background-color:#fff;
    margin:0px;
    padding:0px;
}

JavaScript

$(".dd-ck-select-spv dt a").on('click', function () {
    $(".dd-ck-select-spv dd ul").slideToggle('fast');
});

$(".dd-ck-select-spv dd ul li a").on('click', function () {
    $(".dd-ck-select-spv dd ul").hide();
});

function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}

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


$('.n-select-main input[type="checkbox"]').on('click', function () {

    var title = $(this).closest('.n-select-main').find('input[type="checkbox"]').val(),
        title = $(this).val() + ",";

    if ($(this).is(':checked')) {
        var html = '<span title="' + title + '">' + title + '</span>';
        $('.n-select').append(html);
        $(".select-default").hide();
    } else {
        $('span[title="' + title + '"]').remove();
        var ret = $(".select-default");
        $('.dd-ck-select-spv dt a').append(ret);

    }
});