Select list with HTML options

Using the SlimSelect library

by IceCreamYou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.1.5/index.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.1.5/index.css">
<select id="single">
</select>

<!-- Test material icons in the options -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

SCSS

.ss-main .ss-single-selected .placeholder {
  white-space: pre-wrap !important; // Fix spaces for inline elements
}

.ss-main .ss-single-selected .placeholder * {
  white-space: pre-wrap !important;
  width: auto !important;
}

JavaScript

// From https://github.com/brianvoe/slim-select
var ss = new SlimSelect({
  select: '#single',
  showSearch: false,
});

ss.setData([
	{ text: 'value 1', innerHTML: 'Value <em>test</em> 1' },
	{ text: 'value 2', innerHTML: 'Value <strong>test</strong> <i class="material-icons">home</i>' },
	{ text: 'value 3', innerHTML: '<span>Value <u>test</u> 3</span>' },
	{ text: 'value 4', innerHTML: '<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle r="4" cy="10" cx="10" fill="red"/></svg>' },
]);

ss.set('value 2');