JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Селект для цвета материала -->
<select name="materialColor" class="materialColor" id="materialColor">
		    <option value="" selected="selected">Выберите цвет материала</option>
		    <option value="black">Черный</option>
		    <option value="gray">Серый</option>
		    <option value="beige">Бежевый</option>
		    <option value="red">Красный</option>
		    <option value="brown">Коричневый</option>
		    <option value="blue">Синий</option>
		    <option value="orange">Оранжевый</option>
		    <option value="purple">Фиолетовый</option>
		    <option value="green">Салатовый</option>
		    <option value="white">Белый</option>
		    <option value="yellow">Желтый</option>
</select>
    
<!-- Селект для цвета канта -->
<select name="kantcolor" class="kantcolor" id="kantcolor">
		    <option value="" selected="selected">Выберите цвет канта</option>
		    <option value="kblack">Черный</option>
		    <option value="kgray">Серый</option>
		    <option value="kdgray">Темно-серый</option>
		    <option value="kred">Красный</option>
		    <option value="kdblue">Темно-синий</option>
		    <option value="kblue">Синий</option>
		    <option value="kbeige">Бежевый</option>
		    <option value="kwhite">Белый</option>
		    <option value="kbrown">Коричневый</option>
		    <option value="korange">Оранжевый</option>
		    <option value="kgreen">Салатовый</option>
		    <option value="kwhite">Белый</option>
		    <option value="kyellow">Желтый</option>
		    <option value="kpurple">Фиолетовый</option>
</select>

<!-- Контейнер с наложениями картинок -->
<div class="costruct-karpet">
          <!-- Картинки материала -->
          <img class="material selected" id="black" src="http://autogoods.su/lend/images/colors/black.png" alt="">
          <img class="material" id="gray" src="http://autogoods.su/lend/images/colors/gray.png" alt="">
          <img class="material" id="beige"...

CSS

.costruct-karpet {
    position: relative;
    display: block;
    height: 225px;
    width: 180px;
    margin: auto;
}

.costruct-karpet img {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.selected {
    display: block !important;
}

/* Селект */
/*select start*/
.select_wrapper i {
    color: #757575;
    float: right;
    margin-top: -16px;
    display: block;
    transition: 0.3s ease-in-out;
}

.rotate {
    transform: rotate(180deg);
    animation-duration: 5s;
    transition: 0.3s ease-in-out;
}

.select_wrapper {
    border: 1px solid #bfbfbf;
    font: 14px/18px Acrom;
    color: #000;
    width: 200px;
        padding: 7px 12px 11px 33px;
    margin-bottom: 15px;
    display: inline-block;
    
    cursor: pointer;
    position: relative;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}
.select_wrapper:focus {
    border: 1px solid #235D81;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}
.select_wrapper span {
    display: block;
    margin: 7px 0 0 0;
    width: 100% !important;
}
.select_wrapper .select_inner {
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: #687278;
    display: none;
    position: absolute;
    left: 0;
    top: 38px;
    width: 99%;
    z-index: 3;
    border: 1px solid #fff;
    height: 400px;
    overflow: auto;
}
.select_wrapper ul {
    padding-left: 0;
    margin-left: 0;
}
.select_wrapper .select_inner li {
    list-style: none;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
}
.select_wrapper .select_inner li:hover {
    background: #eee;
}
.select_wrapper .select_inner li:last-child {
    border: none;
    border-radius: 0 0 5px 5px;
}
.select_wrapper .select_inner li:first-child {
    border-radius: 5px 5px 0...

JavaScript

// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА МАТЕРИАЛА
$(document).ready(function (){
    $('#materialColor').wrap('<div class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#materialColor').parent().prepend(function() {
        return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#materialColor').parent().children('span').width($('#materialColor').width());
    $('#materialColor').css('display', 'none');
    $('#materialColor').parent().append('<ul class="select_inner"></ul>');
    $('#materialColor').children().each(function(){
        var opttext = $(this).text();
        var optval = $(this).val();
        $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
    });
    $('#materialColor').parent().find('li').on('click', function (){
        var cur = $(this).attr('id');
        $('#materialColor').parent().children('span').text($(this).text());
        $('#materialColor').children().removeAttr('selected');
        $('#materialColor').children('[value="'+cur+'"]').attr('selected','selected');
        console.log($('#materialColor').children('[value="'+cur+'"]').text());

        // вызов скрипта смены картинки материала
        onChangeSelect();
    });
    $('#materialColor').parent().on('click', function (){
        $(this).find('ul').slideToggle('fast');
    });
});


// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА КАНТА
$(document).ready(function (){
    $('#kantcolor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#kantcolor').parent().prepend(function() {
        return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#kantcolor').parent().children('span').width($('#kantcolor').width());
    $('#kantcolor').css('display', 'none');
    $('#kantcolor').parent().append('<ul class="select_inner"></ul>');
    $('#kantcolor').children().each(function(){
        var...