Как создать выпадающий список select, который будет менять изображение?

$(function(){ 
    $("#catalog__color").bind("change", function(){ 
        var selectedItemValue = $("option:selected").data("path"); 
        $(".catalog__item-img img").attr("src", selectedItemValue); 
    }); 
})

.catalog__item { 
    padding-bottom: 550px 
} 
.catalog__head { 
    margin: 0; 
    font-size: 50px; 
    color: #000 
} 
.catalog__item-img, 
.catalog__item-img-2, 
.catalog__item-img-3, 
.catalog__item-img-4, 
.catalog__item-img-5, 
.catalog__item-img-6 { 
    text-align: center; 
    position: relative; 
    padding-top: 15px; 
    margin-bottom: 20px; 
    width: 320px; 
    height: 230px 
} 
.catalog__item-color, 
.catalog__item-price { 
    margin-bottom: 40px 
} 
.catalog__item-img img, 
.catalog__item-img-2 img, 
.catalog__item-img-3 img, 
.catalog__item-img-4 img, 
.catalog__item-img-5 img, 
.catalog__item-img-6 img { 
    margin-top: 20px; 
    width: auto; 
    height: 190px 
} 
.catalog__item-img-2:before, 
.catalog__item-img-3:before, 
.catalog__item-img-4:before, 
.catalog__item-img-5:before, 
.catalog__item-img-6:before, 
.catalog__item-img:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 45px; 
    width: 79px; 
    height: 36px; 
    background: url(../assets/img/icon/sound-bluet.png) center no-repeat 
} 
label[for*=catalog__color] { 
    font-size: 21px; 
    margin-right: 15px 
} 
#catalog__color, 
#catalog__color-2, 
#catalog__color-3, 
#catalog__color-4, 
#catalog__color-5, 
#catalog__color-6 { 
    border: 4px solid #d9d9d9; 
    font-size: 17px; 
    width: 180px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="catalog__item-img"> 
  <img src="assets/img/smart/grafity.png" alt="" /> 
</div> 
 
<div class="catalog__item-color"> 
  <label for="catalog__color">Выбрать цвет</label> 
  <select name="" id="catalog__color"> 
    <option data-path="assets/img/smart/grafity.png" value="">Графити</option> 
    <option data-path="assets/img/smart/google.png" value="">Гугл</option> 
    <option data-path="assets/img/smart/hacki-1.png" value="">Хаки 1</option> 
    <option data-path="assets/img/smart/fire.png" value="">Огонь</option> 
    <option data-path="assets/img/smart/white.png" value="">Белый</option> 
    <option data-path="assets/img/smart/zebra.png" value="">Зебра</option> 
    <option data-path="assets/img/smart/blue.png" value="">Синий</option> 
    <option data-path="assets/img/smart/black.png" value="">Черный</option> 
    <option data-path="assets/img/smart/hacki.png" value="">Хаки</option> 
    <option data-path="assets/img/smart/pink.png" value="">Розовый</option> 
    <option data-path="assets/img/smart/red.png" value="">Красный</option> 
    <option data-path="assets/img/smart/yellow.png" value="">Желтый</option> 
  </select> 
</div>