How to reset or unselect multi select box using jQuery?

Question

I have one bootstrap tab and i create multi select box using jQuery and the all functions are working properly but the RESET button only not working.

i try my all ways but its waste, anyone can you help me..

Please check my full code on fiddle,

MY FULL CODE IS HERE

Just want how to reset the field using 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

You can trigger the click of your reset button and clear the whole div in your document ready function. After this you can remove the class "selected" so its completely reset.

Like this

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

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

Answer 2

attach an event to reset button. empty the selected-wrapper and remove the selected class from non-selected-wrapper

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

solution: https://jsfiddle.net/zuov3wmb/