Как сбросить или отменить выбор поля множественного выбора с помощью jQuery?

Question

У меня есть одна вкладка начальной загрузки, и я создаю окно множественного выбора, используя jQuery, и все функции работают должным образом, но только кнопка RESET не работает.

Я стараюсь всеми способами, но это пустая трата, любой, кто может вам помочьменя ..

Пожалуйста, проверьте мой полный код на скрипке,

Мой полный код здесь

Простохотите, как сбросить поле с помощью jQuery

(function($) {

  function refresh_select($select) {

    // Clear columns
    $select.wrapper.selected.html('');
    $select.wrapper.non_selected.html('');

    // Get search value
    if ($select.wrapper.search) {
      var query = $select.wrapper.search.val();
    }

    var options = [];

    // Find all select options
    $select.find('option').each(function() {
      var $option = $(this);

      var value = $option.prop('value');
      var label = $option.text();
      var selected = $option.is(':selected');

      options.push({
        value: value,
        label: label,
        selected: selected,
        element: $option,
      });
    });

    // Loop over select options and add to the non-selected and selected columns
    options.forEach(function(option) {
      var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);

      // Create clone of row and add to the selected column
      if (option.selected) {
        $row.addClass('selected');
        var $clone = $row.clone();

        // Add click handler to mark row as non-selected
        $clone.click(function() {
          option.element.prop('selected', false);
          $select.change();
        });

        // Add key handler to mark row as selected and make the control accessible
        $clone.keypress(function() {
          if (event.keyCode === 32 || event.keyCode === 13) {
            // Prevent the default action to stop scrolling when space is pressed
            event.preventDefault();
            option.element.prop('selected', false);
            $select.change();
          }
        });

        $select.wrapper.selected.append($clone);
      }

      // Add click handler to mark row as selected
      $row.click(function() {
        option.element.prop('selected', 'selected');
        $select.change();
      });

      // Add key handler to mark row as selected and make the control accessible
      $row.keypress(function() {
        if (event.keyCode === 32 || event.keyCode === 13) {
          // Prevent the default action to stop scrolling when space is pressed
          event.preventDefault();
          option.element.prop('selected', 'selected');
          $select.change();
        }
      });

      // Apply search filtering
      if (query && query != '' && option.label.toLowerCase().indexOf(query.toLowerCase()) === -1) {
        return;
      }

      $select.wrapper.non_selected.append($row);

    });

  }


  $.fn.multi = function(options) {

    var settings = $.extend({
      'enable_search': true,
      'search_placeholder': 'Search...',
    }, options);


    return this.each(function() {

      var $select = $(this);

      // Check if already initalized
      if ($select.data('multijs')) {
        return;
      }

      // Make sure multiple is enabled
      if (!$select.prop('multiple')) {
        return;
      }

      // Hide select
      $select.css('display', 'none');
      $select.data('multijs', true);

      // Start constructing selector
      var $wrapper = $('<div class="multi-wrapper">');

      // Add search bar
      if (settings.enable_search) {
        var $search = $('<input class="search-input" type="text" />').prop('placeholder', settings.search_placeholder);

        $search.on('input change keyup', function() {
          refresh_select($select);
        })

        $wrapper.append($search);
        $wrapper.search = $search;
      }

      // Add columns for selected and non-selected
      var $non_selected = $('<div class="non-selected-wrapper">');
      var $selected = $('<div class="selected-wrapper">');

      $wrapper.append($non_selected);
      $wrapper.append($selected);

      $wrapper.non_selected = $non_selected;
      $wrapper.selected = $selected;

      $select.wrapper = $wrapper;

      // Add multi.js wrapper after select element
      $select.after($wrapper);

      // Initialize selector with values from select element
      refresh_select($select);

      // Refresh selector when select values change
      $select.change(function() {
        refresh_select($select);
      });

    });

  }

})(jQuery);

$(document).ready(function() {
  $('select').multi({
    search_placeholder: 'Search',
  });
});

/* Reset button */

function DeselectListBox() {
  var ListBoxObject = document.getElementById("firstData")

  for (var i = 0; i < ListBoxObject.length; i++) {
    if (ListBoxObject.options[i].selected) {
      ListBoxObject.options[i].selected = false
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вы можете вызвать нажатие кнопки сброса и очистить весь div в функции готовности документа. После этого вы можете удалить класс «selected», чтобы он полностью сбрасывался.

Как это

$(document).ready(function() {
  $('select').multi({
    search_placeholder: 'Search',
  });

  $('#tabReset').click(function() {
    $('.selected-wrapper').empty();
    $('a').removeClass('selected');
  });
});

Answer 2

прикрепить событие к кнопке сброса. очистите selected-wrapper и удалите выбранный класс из non-selected-wrapper

$("button.alltabreset").click(function(){  
  $(".selected-wrapper").empty();
  $(".item").removeClass("selected");
});

решения: https://jsfiddle.net/zuov3wmb/