<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s-hidden {
visibility: hidden;
padding-right: 10px;
}
.select-box {
cursor: pointer;
display: inline-block;
position: relative;
font: normal 11px/22px Arial, Sans-Serif;
color: black;
border: 1px solid #ccc;
}
.styledSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
padding: 0 10px;
font-weight: bold;
}
.styledSelect:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 9px;
right: 6px;
}
.styledSelect:active,
.styledSelect.active {
background-color: #eee;
}
.options-box {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0 0;
padding: 0 0;
list-style: none;
border: 1px solid #ccc;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: white;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.options-box li {
padding: 0 6px;
margin: 0 0;
padding: 0 10px;
border-bottom: 1px solid #ededed;
}
.options-box li:hover {
background-color: #39f;
color: white;
}
</style>
</head>
<body>
<select id="selectbox1">
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
<option value="" disabled selected>select a box...</option>
<option value="month">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<script src="../jquery.js"></script>
<script>
var slectStylesPlugin = (function() {
var selectValues = {};
$('select').each(function() {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
console.log($(this).children('option').attr('disabled'));
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select-box"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options-box'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.styledSelect.active').each(function() {
$(this).removeClass('active').next('ul.options-box').hide();
});
$(this).toggleClass('active').next('ul.options-box').toggle();
});
if ($(this).children('option').attr('disabled')) {
$listItems.each(function(index, val) {
if (index == 0) {
$(this).attr('disabled', 'disabled');
$(this).css({
'background-color': '#ccc',
"pointer-events": "none",
"color": "white",
"cursor": "pointer"
});
}
});
}
$listItems.click(function(e) {
if (!$(this).attr('disabled')) {
$list.hide();
} else {
return;
}
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
// select option add select
$('#' + $this.attr('id')).find("option[value=" + $this.val() + "]").attr("selected", 'selected');
// This is selct id and choose value
selectValues[$this.attr('id')] = $this.val();
});
// Hide the ul when user click the outside
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
return {
selectValues: selectValues
}
}());
</script>
<script>
</script>
</body>
</html>