Custom select dropdown

gistfile1.txt

<span class="custom-select">

	<span class="header">Recipient:</span>
	<span class="option" data-option="normal">Normal</span>

	<ul class="dropdown">
		<li data-option="all">All: Email everyone</li>
		<li data-option="normal">Normal: Everyone except pre-existing low traffic subscribers</li>
		<li data-option="none">None: Do not email anyone</li>
		<li data-option="new">New: Only newly-added subscribers/cc recipients</li>
		<li data-option="new_ass">New + Assignee: Newly-added subscribers/cc recipients and all assigness</li>
	</ul>
</span>





.custom-select {
	padding: 0px 10px;
	border-radius: 5px;
	display: inline-block;
	z-index: 1000;
}
.custom-select span.header {
	background-color: #EEE;
	padding: 5px;
	border-radius: 5px;
}
.custom-select.open span.header {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.custom-select span.header-name {
	font-weight: bold;
}

.custom-select span.option {
	padding-right: 20px;
	display: inline-block;
	position: relative;
}
.custom-select span.option::after {
	content: '▼';
	position: absolute;
	right: 0px;
	font-size: 10px;
}
.custom-select.open ul.custom-select-dropdown {
	display: block;
	z-index: 100;
	background: #FFF;
	border: 1px solid #EEE;
	padding: 5px;
}

.custom-select-dropdown li {
	display: block;
	font-size: 12px;
	padding-bottom: 3px;
	cursor: pointer;
	float: none;
}
.custom-select-dropdown li:not(:last-child) {
	border-bottom: 1px solid #EEE;
}

gistfile2.txt

// To togggle the dropdown
$('.custom-select').click(function(){
  $(this).toggleClass('open');
});

//To select the item and set the value
$('.custom-select ul.dropdown li').click(function(){
   var selectValue = $(this).data('option');
   var selectText = $(this).html();

   selectText = selectText.split(':')[0];
   $('.custom-select .option').data('option', selectValue);
   $('.custom-select .option').html(selectText);
   
   //Do not kill the event, as it is used to toggle the dropdown

})