JSFiddle - React, Tailwind, and code Playground
HTML
<div class="sel_wrap">
<div class="sel_imul sel_year">
<div class="sel_selected">
<div class="selected-text">Year</div><div class="sel_arraw"></div>
</div>
<div class="sel_options">
<div class="sel_option" value="2013">2013</div>
<div class="sel_option" value="2014">2014</div>
<div class="sel_option" value="2015">2015</div>
<div class="sel_option" value="2016">2016</div>
<div class="sel_option" value="2017">2017</div>
<div class="sel_option" value="2018">2018</div>
<div class="sel_option" value="2019">2019</div>
<div class="sel_option" value="2020">2020</div>
</div>
</div>
<select id="c_year" name="c_year">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="sel_wrap">
<div class="sel_imul">
<div class="sel_selected">
<div class="selected-text">Month</div><div class="sel_arraw"></div>
</div>
<div class="sel_options">
<div class="sel_option" value="01">Январь</div>
<div class="sel_option" value="02">Февраль</div>
<div class="sel_option" value="03">Март</div>
<div class="sel_option" value="04">Апрель</div>
<div class="sel_option" value="05">Май</div>
<div class="sel_option" value="06">Июнь</div>
<div class="sel_option" value="07">Июль</div>
<div class="sel_option" value="08">Август</div>
<div class="sel_option" value="09">Сентябрь</div>
<div class="sel_option"...
CSS
.sel_wrap {
display:inline-block;
font-family: 'Open Sans', sans-serif;
color:#979183;
margin-right:5px;
}
.sel_wrap select{
display:none;
}
.sel_imul {
width:150px;
}
.sel_imul.sel_year {
width:100px;
}
.sel_imul.sel_day {
width:90px;
}
.sel_imul.sel_year {
width:100px;
}
.sel_imul .sel_selected{
background:#fff;
border:1px solid #e9e5de;
padding:10px 12px;
font-size:14px;
cursor:pointer;
position:relative;
}
.sel_imul.act .sel_selected{
}
.sel_selected .sel_arraw{
height:100%;
width:38px;
background:url(images/arr.png) 50% 50% no-repeat;
position:absolute;
top:0px;
right:0px;
border-left:1px solid #e9e5de;
}
.sel_imul:hover .sel_selected .sel_arraw{
/*background-color:#cbebea;
border-left:1px solid #e9e5de;*/
}
.sel_imul.act .sel_selected .sel_arraw{
/* background-color:#abcdcc;
border-left:1px solid #e9e5de;*/
}
.sel_imul .sel_options {
background:#fff;
border:1px solid #e9e5de;
border-top:none;
overflow:auto;
position:absolute;
width:148px;
display:none;
height:150px;
z-index:10;
}
.sel_imul.sel_year .sel_options {
width:98px;
}
.sel_imul.sel_day .sel_options {
width:88px;
}
.sel_options .sel_option{
padding:3px 4px;
font-size:14px;
border:1px solid #fff;
border-right:none;
border-left:none;
}
.sel_options .sel_option:hover{
border-color:#cbebea;
cursor:pointer;
}
.sel_options .sel_option.sel_ed{
background:#cbebea;
}
JavaScript
jQuery(document).ready(function($){
$('.sel_imul').on('click', function() {
$('.sel_imul').removeClass('act');
$(this).addClass('act');
if ($(this).children('.sel_options').is(':visible')) {
$('.sel_options').hide();
} else {
$('.sel_options').hide();
$(this).children('.sel_options').show();
}
});
$('.sel_option').on('click', function() {
//меняем значение на выбранное
var tektext = $(this).html();
$(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);
//активируем текущий
$(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
$(this).addClass('sel_ed');
//устанавливаем значение для селекта
var tekval = $(this).attr('value');
tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
$(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
if ($(this).val() == tekval) {
$(this).attr('selected', 'select');
}
});
/* Смена дней в зависимости от месяца. */
if($(this).parents('.sel_wrap').find('select').is("#c_month") || $(this).parents('.sel_wrap').find('select').is("#c_year")){
var year = $('#c_year option[selected="selected"]').val();
var month = $('#c_month option[selected="selected"]').val();
if(month > 0 && year > 0){
var dayCount = new Date(year, month, 0).getDate();
var thpar = $('#c_day').parent('.sel_wrap').find('.sel_options');
thpar.html('');
$('#c_day').html('');
for(var i = 1; i <= dayCount; i++){
thpar.append('<div class="sel_option" value="'+i+'">'+i+'</div>');
$('#c_day').append('<option value="'+i+'">'+i+'</option>');
}
}
}
});
var selenter = false;
$('.sel_imul').on('mouseenter', function() {
selenter = true;
});
$('.sel_imul').on('mouseleave', function() {
selenter = false;
});
// выбираем день
$('.sel_day').on('click', '.sel_option',...