Image Select

HTML

<label>
	<select class="options_picker" id="optionsPicker">
		<option value="gallery_image_1" data-thumbnail="/img/gallery_img_1.jpg">Gallery image #1</option>
		<option value="gallery_image_2" data-thumbnail="/img/gallery_img_2.jpg">Gallery image #2</option>
		<option value="gallery_image_3" data-thumbnail="/img/gallery_img_3.jpg">Gallery image #3</option>
		<option value="gallery_image_4" data-thumbnail="/img/gallery_img_4.jpg">Gallery image #4</option>
		<option value="gallery_image_5" data-thumbnail="/img/gallery_img_5.jpg">Gallery image #5</option>
	</select>
</label>

<div class="dropdown_wrap">
	<button class="button_select" id="buttonSelect" value="gallery_image_1">
		<img src="/img/gallery_img_1.jpg" alt="Gallery image #1"><span>Gallery image #1</span>
	</button>
	<div class="dropdown_block" id="dropdownBlock">
		<ul class="dropdown_list" id="dropdownList"></ul>
	</div>
</div>

CSS

.options_picker{display:none}
.button_select{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:100%;max-width:35rem;padding:1rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;background-color:#fff;border:.1rem solid #ccc;outline:none}
.button_select:focus{background-color:#f4f3f3}
.dropdown_wrap{position:relative}
.dropdown_block{display:none;width:100%;max-width:35rem;border:.1rem solid rgba(0,0,0,.15);background-color:#fff;-webkit-box-shadow:0 .6rem 1.2rem rgba(0,0,0,.175);-moz-box-shadow:0 .6rem 1.2rem rgba(0,0,0,.175);box-shadow:0 .6rem 1.2rem rgba(0,0,0,.175);-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;margin:1rem 0 0;overflow:hidden;position:absolute;top:100%;left:0;z-index:5}
.dropdown_list li{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;padding:1rem;width:100%;cursor:pointer}
.dropdown_list img,.button_select img{width:4rem;height:2.5rem;margin:0 1rem 0 0;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;\A	'}
.dropdown_list span,.button_select span{text-align:left}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.dropdown_list li:hover,.button_select:hover{background-color:#f4f3f3}
}

SCSS

.options_picker{
	display: none;
}

.button_select{
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 35rem;
	padding:1rem;
	border-radius: .5rem;
	background-color: #ffffff;
	border: .1rem solid #cccccc;
	outline: none;
	
	&:focus {
		background-color: #F4F3F3;
	}
}

.dropdown_wrap {
	position: relative;
}

.dropdown_block{
	display: none;
	width: 100%;
	max-width: 35rem;
	border: .1rem solid rgba(0,0,0,.15);
	background-color: #ffffff;
	box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.175);
	border-radius: .5rem;
	margin: 1rem 0 0;
	overflow: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
}

.dropdown_list {
	li{
		display: flex;
		align-items: center;
		padding: 1rem;
		width: 100%;
		cursor: pointer;
	}
}

.dropdown_list, .button_select {
	img {
		width: 4rem;
		height: 2.5rem;
		margin: 0 1rem 0 0;
		object-fit: contain;
		font-family: 'object-fit: contain;';
	}
	
	span {
		text-align: left;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.dropdown_list li:hover, .button_select:hover {background-color: #F4F3F3;}
}

JavaScript

function dropdownChange(options_picker, dropdown_block, dropdown_list, button_select) {
	var optionsArray = [];
	
	$(options_picker + ' option').each(function(){
		var img = $(this).attr("data-thumbnail");
		var text = this.innerText;
		var value = $(this).val();
		var item = '<li><img src="'+ img +'" alt="'+ text +'" data-value="'+ value +'"/><span>'+ text +'</span></li>';
		optionsArray.push(item);
	});
	
	$(dropdown_list).html(optionsArray);
	
	$(dropdown_list + ' li').click(function(){
		var img = $(this).find('img').attr("src");
		var value = $(this).find('img').attr('value');
		var text = this.innerText;
		var item = '<img src="'+ img +'" alt="'+ text +'" /><span>'+ text +'</span>';
		$(button_select).html(item);
		$(button_select).attr('value', value);
		$(dropdown_block).toggle();
	});
	
	$(button_select).click(function(){
		$(dropdown_block).toggle();
	});
}

dropdownChange('#optionsPicker','#dropdownBlock','#dropdownList','#buttonSelect');
dropdownChange('#optionsPicker2','#dropdownBlock2','#dropdownList2','#buttonSelect2');

$(document).mouseup(function(e){
	var dropdownBlock = $(".dropdown_block");
	if (!dropdownBlock.is(e.target) && dropdownBlock.has(e.target).length === 0) {
		dropdownBlock.css('display', 'none');
	}
});