The current implementation provides the functionality to convert select boxes into list items for styling purposes.
However, a drawback of the current setup is that once a dropdown is opened, it can only be closed by clicking on the document or another dropdown menu.
I am seeking recommendations on improving this behavior. The goal is to make sure that clicking on a different dropdown item will toggle off the current one. But if you click on the same item again, it should only activate and not deactivate it.
var jq = jQuery.noConflict();
(function (jq) {
// Iterate over each select element
jq('.selectBoxStyle').each(function () {
// Cache the number of options
var sthis = jq(this),
numberOfOptions = jq(this).children('option').length;
// Hides the select element
if (jq('html').hasClass('touch')) {
jq('.options').addClass('s-hidden');
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.wrap('<div class="styledSelect"></div>');
} else {
sthis.addClass('s-hidden');
// Wrap the select element in a div
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.after('<div class="styledSelect"></div>');
// Cache the styled div
var styledSelect = sthis.next('div.styledSelect');
// Show the first select option in the styled div
styledSelect.text(sthis.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var slist = jq('<ul />', {
'class': 'options'
}).insertAfter(styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
jq('<li />', {
text: sthis.children('option').eq(i).text(),
"data-value": sthis.children('option').eq(i).val(),
"class": sthis.children('option').eq(i).attr('class'),
"data-sku": sthis.children('option').eq(i).data('sku'),
"data-stock": sthis.children('option').eq(i).data('stock')
}).appendTo(slist);
}
// Cache the list items
var slistItems = slist.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
styledSelect.click(function (e) {
e.stopPropagation();
//jq(this).toggleClass('clickme').removeClass('active');
jq('div.styledSelect.active').each(function () {
jq(this).removeClass('active').next('ul.options').hide();
console.log(this);
});
jq(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
slistItems.click(function (e) {
e.stopPropagation();
styledSelect.text(jq(this).text()).removeClass('active');
jq(this).addClass("selected").siblings().removeClass("selected");
sthis.val(jq(this).attr('value'));
slist.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
jq(document).click(function () {
styledSelect.removeClass('active');
slist.hide();
});
}
});
}(jq));body {
background-color:white;
}
.selectSizeMain {
width: 56.77966%;
float: none;
margin: 2.1875rem auto auto;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
color:black;
font-family: GibsonRegular, HelveticaNeue, Helvetica, sans-serif;
font-size: 14px;
font-size: .875rem;
height: 40px;
width: 100%;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
padding: 11px 13px;
border: 1px solid #ddd;
background-color: #fff;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top: 17px;
right: 9px;
}
.styledSelect.active:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:green transparent transparent transparent;
position:absolute;
top: 17px;
right: 9px;
}
.options {
display:none;
position:absolute;
max-height: 280px;
overflow-y:scroll;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
border-top:none;
background-color:white;
}
.options li {
padding: 11px 13px;
margin:0 0;
}
.options li:hover {
background-color: #000;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">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>