Форум

wainzor · #1 (**permalink**) 14.10.2022, 15:06

Всем привет! Есть обычный селект

<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 при нажатии на которую будет происходить сброс выбранных значений до значения по умолчанию. Спасибо

рони · #2 (**permalink**) 14.10.2022, 16:18

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>

Форум

Справочник

Discord чат

Курсы javascript