Меняем картинку с помощью select

Изменяем путь изображения с помощью select и jQuery

HTML

<div class="Windows">
    <div class="Part">
		<label>Выбери картинку:</label>
        <select id="selm" name="m">
		<optgroup label="Ничоси">
			<option data-path="https://vkclub.su/_data/stickers/nichosi/sticker_vk_nichosi_024.png">Ничоси</option>
			<option data-path="https://vkclub.su/_data/stickers/nichosi/sticker_vk_nichosi_030.png">Ничосити</option>
			<option data-path="https://vkclub.su/_data/stickers/nichosi/sticker_vk_nichosi_028.png">Тысяча чертей</option>
			<option data-path="https://vkclub.su/_data/stickers/nichosi/sticker_vk_nichosi_025.png">Божечки-кошечки</option>
			<option data-path="https://vkclub.su/_data/stickers/nichosi/sticker_vk_nichosi_026.png">Хираси</option>
			<option data-path="https://vkclub.su/_data/stickers/nichosi/sticker_vk_nichosi_027.png">Чертаси</option>
		</optgroup>
		<optgroup label="Славик">
			<option data-path="https://vkclub.su/_data/stickers/slavik/sticker_vk_slavik_000.png">Четко</option>
			<option data-path="https://vkclub.su/_data/stickers/slavik/sticker_vk_slavik_001.png">Нечетко</option>
			<option data-path="https://vkclub.su/_data/stickers/slavik/sticker_vk_slavik_015.png">Нет</option>
			<option data-path="https://vkclub.su/_data/stickers/slavik/sticker_vk_slavik_041.png">Шоколад не виноват</option>
			<option data-path="https://vkclub.su/_data/stickers/slavik/sticker_vk_slavik_019.png">Пацан к успеху шел</option>
			<option data-path="https://vkclub.su/_data/stickers/slavik/sticker_vk_slavik_003.png">Брат за брата</option>
		</optgroup>
	</select>
	<small>и она быстренько изменится</small>
    </div>
    <div class="Part" id="selmimg">
        <img src="https://vkclub.su/_data/stickers/spotty/sticker_vk_spotty_004.png" />
    </div>
</div>

CSS

* {
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	box-sizing: border-box;
}

body {
	background: #f7f7f7;
}

.Windows {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 500px;
    margin: 40px auto;
	border-radius: 5px;
	box-shadow: #b3b3b3 0px 0px 10px 0px;
	background: #fff;
}

.Part {
    display: block;
    width: 50%;
    padding: 30px;
}

label {
	display: block;
    width: 100%;
	margin-bottom: 4px;
	font-weight: bold;
	font-size: 18px;
}
select {
	display: block;
    width: 100%;
	font-size: 16px;
	padding: 4px;
}
small {
	display: block;
    width: 100%;
	margin-top: 4px;
	font-size: 12px;
}

img {
    display: block;
    width: auto;
    height: 160px;
	margin: auto;
}

JavaScript

$(document).ready(function() {
    $('#selm').change(function() {
        $('#selmimg').find('img:first').attr('src', $('#selm option:selected').attr('data-path'));
    });
});