JSFiddle - React, Tailwind, and code Playground
HTML
<div id="yourSelectID" class="select">
<div class="option-selection" data-value="none">12 месяцев <span class="percents2"> - 15%</span></div>
<div class="option-container">
<div class="option" data-value="1" value="15">12 месяцев <span class="percents2"> - 15%</span></div>
<div class="option" data-value="2" value="10">6 месяцев <span class="percents2"> - 10%</span></div>
<div class="option" data-value="3" value="5">3 месяца <span class="percents2"> - 5%</span></div>
</div>
<div class="option-expand">+</div>
</div>
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;
width: auto;
height: auto;
}
.option {
padding:5px;
background:#FFF;
width: auto;
}
.percents2{
color: red;
float: right;
}
JavaScript
<!-- $('.option-selection').width($('.option-selection').next('.option-container').width()-10); -->
$('.option-selection, .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.html();
$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};
};