JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<select name="" value="Сделайте выбор" id="selectCar">
 <option value="">Сделайте выбор</option>
 <option value="img_acura">Acura</option>
 <option value="img_aston">Aston_Martin</option>
 <option value="img_alfa_romeo">Alfa_Romeo</option>
<option value="img_audi">Audi</option>
<option value="img_bmw">BMW</option>
<option value="img_brilliance">Brilliance</option>
<option value="img_cadillac">Cadillac</option>
<option value="img_chery">Chery</option>
<option value="img_chevrolet">Chevrolet</option>
<option value="img_lada">lada</option>
</select>
<br>
<br>
<div class="wrapper">
  <a href="#"><span id="img_acura"></span></a>
  <a href="#"><span id="img_aston"></span></a>
  <a href="#"><span id="img_alfa_romeo"></span></a>
  <a href="#"><span id="img_audi"></span></a>
  <a href="#"><span id="img_bmw"></span></a>
  <a href="#"><span id="img_brilliance"></span></a>
  <a href="#"><span id="img_cadillac"></span></a>
  <a href="#"><span id="img_chery"></span></a>
  <a href="#"><span id="img_chevrolet"></span></a>
 <div id="drop">
 <a href="#"><span id="img_lada"></span></a>
    </div>
<br>
    <a class="spoiler" style="color:black; cursor:pointer" >Расскрыть список</a>
</div>

CSS

.wrapper span[id*=img] {
  width: 146px;
  height: 72px;
  display: inline-block;
  border: 1px dotted #B9B9B9;
  background-color: #b7f7df;
  -webkit-transition: border 0.3s ease-out;
  transition: border 0.3s ease-out;
   box-sizing:border-box;
}
.wrapper a:hover span[id*=img]{
  border: 1px solid #E15A5A;
}
.wrapper #img_bmw{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/logo_bmw.png) no-repeat center center;
    background-size:40%;
}
.wrapper #img_aston{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/logo_aston_martin.png) no-repeat center center;
    background-size:60%;
}
.wrapper #img_acura{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/Acura-logo.png) no-repeat center center;
    background-size:40%;
}
.wrapper #img_ferrari{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/logo_ferrari.png) no-repeat center center;
  background-size:40%;
 }
 #drop{display:none}

JavaScript

$(function() {
    $("#selectCar").change(function() {
        $("[id^='img_']").css("border-color", '');
        if (!this.value.length)
            $('body,html').animate({
                scrollTop: 30
            }, 500);
        var elem = $("#" + this.value);
        // селектор пустой оказался - прокручиваем вверх
        elem.css('border-color', 'rgba(0,255,0,1)');
        if (elem.parent().is("#drop"))
            spoiler();  
        $('body,html').animate({
            scrollTop:elem.offset().top - 20
          
        }, 500);
    });

    $('.spoiler').click(function() {
        $('.spoiler').html(($('#drop').is(':visible') ? 'Расс' : 'За') + 'крыть список');
        $('#drop').slideToggle();
    });

    function spoiler() {
        if ($("#drop").is(":visible"))
            return
        $('.spoiler').html('Закрыть список');
        $('#drop').slideDown();
    };
});