// Select
$('.select').each(function(){
// Variables
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
$this.hide();
// Wrap all in select box
$this.wrap('<div class="select"></div>');
// Style box
$('<div>',{
class: 'select__gap',
text: 'Please select'
}).insertAfter($this);
var selectGap = $this.next('.select__gap'),
caret = selectGap.find('.caret');
// Add ul list
$('<ul>',{
class: 'select__list'
}).insertAfter(selectGap);
var selectList = selectGap.next('.select__list');
// Add li - option items
for(var i = 0; i < selectOptionLength; i++){
$('<li>',{
class: 'select__item',
html: $('<span>',{
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
}
// Find all items
var selectItem = selectList.find('li');
selectList.slideUp(0);
selectGap.on('click', function(){
if(!$(this).hasClass('on')){
$(this).addClass('on');
selectList.slideDown(dur);
selectItem.on('click', function(){
var chooseItem = $(this).data('value');
$('select').val(chooseItem).attr('selected', 'selected');
selectGap.text($(this).find('span').text());
selectList.slideUp(dur);
selectGap.removeClass('on');
});
} else {
$(this).removeClass('on');
selectList.slideUp(dur);
}
});
});
*,
*:before,
*:after{
box-sizing: border-box;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.select {
display: inline-block;
vertical-align: top;
max-width: 245px;
width: 100%;
}
.select-wrap {
max-width: 700px;
width: 100%;
margin: 20px auto;
}
.select-wrap select {
margin: 20px;
}
.select__gap {
background: transparent;
color: #467797;
border: 1px solid #467797;
text-transform: uppercase;
font-size: 15px;
padding: 10px 15px;
cursor: pointer;
position: relative;
}
.on.select__gap,
.select__gap:hover {
color: #467797;
}
.select__list {
background: transparent;
border: 1px solid #467797;
margin: 0px 0;
}
.select__list.on {
display: block;
}
.select__item span {
display: block;
padding: 10px 15px;
cursor: pointer;
color: #333;
}
.select__item.selected,
.select__item span:hover {
color: #467797;
}
.select__gap:after {
content: '';
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 15px;
top: 50%;
margin-top: -7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 14px solid #000;
-webkit-transition: all .27s ease-in-out;
-o-transition: all .27s ease-in-out;
transition: all .27s ease-in-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.on.select__gap:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Сортировать:
<select name="select-box" id="selectId" class="select">
<option value="item-1" name="value">item-1</option>
<option value="item-2" name="value">item-2</option>
</select>