How to create a drop-down list select, which will change the image?

 $(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>