Сброс кастомного селекта
Всем привет! Есть обычный селект
<select class="select" name="referrer">
<option value="">Значение1</option>
<option value="1">Значение2</option>
<option value="2">Значение3</option>
</select>
Который для кастомизации с помощью js преобразован в список
$('.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: 'Значение По Умолчанию'
}).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);
}
});
});
Вопрос, как сделать кнопку reset при нажатии на которую будет происходить сброс выбранных значений до значения по умолчанию. Спасибо |
кастомизация селекта
wainzor,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.select__item.active {
background-color: #DCDCDC;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('.select').each(function() {
// Variables
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
if (!selectedOption.length) selectedOption.eq(0);
$this.hide();
// Wrap all in select box
$this.wrap('<div class="select"></div>');
// Style box
$('<div>', {
class: 'select__gap',
text: selectedOption.text()
}).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');
var defaultLi;
// Add li - option items
for (var i = 0; i < selectOptionLength; i++) {
let selected = selectOption.eq(i)[0] === selectedOption[0];
let cls = selected ? 'select__item active default' : 'select__item';
let li = $('<li>', {
class: cls,
html: $('<span>', {
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
if (selected) defaultLi = li;
}
$this.on('reset', function() {
defaultLi.click()
})
// 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');
$this.val(chooseItem);
selectGap.text($(this).find('span').text());
selectItem.removeClass('active');
$(this).addClass('active');
selectList.slideUp(dur);
selectGap.removeClass('on');
});
} else {
$(this).removeClass('on');
selectList.slideUp(dur);
}
});
});
$('button').on('click', function() {
$('[name="referrer"]').trigger('reset');
})
});
</script>
</head>
<body>
<select class="select" name="referrer">
<option value="">Значение1</option>
<option value="1">Значение2</option>
<option value="2" selected="selected">Значение3</option>
</select>
<button>reset</button>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:26. |