 |
| Select option with image and text Bootstrap |
<!doctype html>
<base href="https://www.logo.wine/a/logo/BKash/" />
<link rel=stylesheet href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.css" />
<link rel=stylesheet href="https://unpkg.com/bootstrap-select@1.13.8/dist/css/bootstrap-select.css" />
<style> body { margin: 1rem; }
.my-imagecc { height: 20px; }
</style>
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
-->
<select title="Select your surfboard" class="my-image-selectpicker">
<option data-thumbnail="BKash-bKash-Logo.wine.svg">Chrome</option>
<option data-thumbnail="BKash-bKash-Logo.wine.svg">Firefox</option>
<option data-thumbnail="BKash-bKash-Logo.wine.svg">IE</option>
<option data-thumbnail="BKash-bKash-Logo.wine.svg">Opera</option>
<option data-thumbnail="BKash-bKash-Logo.wine.svg">Safari</option>
</select>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.slim.min.js"></script>
<script data-src="https://unpkg.com/popper.js@1.14.7/dist/popper.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"
data-src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.min.js" ></script>
<script src="https://unpkg.com/bootstrap-select@1.13.8/dist/js/bootstrap-select.min.js"></script>
<script>
const BASE_URL = $('base[ href ]').attr('href');
const $_SELECT_PICKER = $('.my-image-selectpicker');
$_SELECT_PICKER.find('option').each((idx, elem) => {
const $OPTION = $(elem);
const IMAGE_URL = $OPTION.attr('data-thumbnail');
if (IMAGE_URL) {
$OPTION.attr('data-content', "<img class='my-imagecc' src='%i'/> %s".replace(/%i/, BASE_URL + IMAGE_URL).replace(/%s/, $OPTION.text()))
}
console.warn('option:', idx, $OPTION)
});
$_SELECT_PICKER.selectpicker();
</script>
إرسال تعليق