如何使用 jQuery 重置或取消选择多个 select 框？

Question

我有一个引导选项卡，我使用 jQuery 创建了多个 select 框，所有功能都正常工作，但只有 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

您可以触发重置按钮的单击并清除文档中准备好的 function 中的整个 div。 在此之后，您可以删除 class “选中”，使其完全重置。

像这样

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

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

Answer 2

将事件附加到重置按钮。 清空selected-wrapper并从non-selected-wrapper器中删除选定的 class

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

解决方案： https://jsfiddle.net/zuov3wmb/