Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save farik92/98e25c5d638317fe85a52ff5382a6139 to your computer and use it in GitHub Desktop.

Select an option

Save farik92/98e25c5d638317fe85a52ff5382a6139 to your computer and use it in GitHub Desktop.
Стилизация селекта
$(document).ready(function(){
var f_select = function(){
var $select = $('.f-select');
var selectId = 'f-select_' + Math.floor( Math.random( ) * (100001) );
$select.addClass(selectId);
$select.css('display', 'none');
$select.after('<div class="f-custom-select" id="' + selectId + '"><div class="f-custom-select__title"><span></span></div></div><div class="f-custom-select__hidden" data-select-class="' + selectId + '"></div>');
var $f_select = $('#' + selectId);
var selectVal = $select.val();
$select.find('option').each(function(){
var optionValue = $(this).attr('value');
var optionText = $(this).text();
$f_select.siblings('.f-custom-select__hidden').append('<span class="f-custom-select__option" data-value="' + optionValue + '">' + optionText + '</span>')
if (optionValue == selectVal)
$f_select.find('.f-custom-select__title span').text(optionText);
})
$f_select.siblings('.f-custom-select__hidden').find('.f-custom-select__option').click(function(){
var selectId = $(this).parent('.f-custom-select__hidden').data('select-class');
$('.' + selectId).val($(this).data('value'));
$('#' + selectId + ' .f-custom-select__title span').text($(this).text());
})
$f_select.click(function(){
$(this).siblings('.f-custom-select__hidden').toggle();
return false;
});
$('body').click(function(){
$('.f-custom-select__hidden').toggle();
})
}
f_select();
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment