JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<div id="yourSelectID" class="select">
    <div class="option-selection" data-value="none">none</div>
    <div class="option-container">
        <div class="option" data-value="1" style="color:red;">One</div>
        <div class="option" data-value="2">Two</div>
        <div class="option" data-value="Whatever" style="color:blue;">1337</div>
    </div>
    <div class="option-expand">+</div>
</div>

<button>Show Selection</button>

CSS

.select {
    border:1px solid #444444;
    height:20px;
    display:inline-block;
    border-radius:3px;
}
.option-container {
    display:none;
    position:absolute;
    top:30px;
    border:1px solid;
    cursor:pointer;
}
.option-expand {
    float:left;
    cursor:pointer;
    padding:0 5px;
}
.option-selection {
   min-height:1px;
   float:left;
    padding:0 5px;
}
.option {
    padding:5px;
    background:#FFF;
}

JavaScript

$('.option-selection').width($('.option-selection').next('.option-container').width()-10);
$('.option-expand').click(function(e){
    e.preventDefault();
    $(this).parent().children('.option-container').stop();
    $(this).parent().children('.option-container').slideToggle(); 
});

$('.option').click(function(e){
    e.preventDefault();
    $this = $(this);
    var value = $this.attr('data-value');
    var name  = $this.text();
    $parent = $this.parent().parent().children('.option-selection');
    $parent.html(name);
    $parent.attr('data-value', value);
    $optionContainer = $this.parent();
    $optionContainer.slideToggle();
});


function getSelection(id){
    $selection = $('#'+id).children('.option-selection');
    var name = $selection.text();
    var value = $selection.attr('data-value');
    return {name: name, value: value};
};

$('button').click(function(e){
    var result = getSelection('yourSelectID');
    alert('Selection name: '+ result.name +' Selection value: ' + result.value);
});