[英]How to reset or unselect multi select box using jQuery?
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.我有一个引导选项卡,我使用 jQuery 创建了多个 select 框,所有功能都正常工作,但只有 RESET 按钮不起作用。
i try my all ways but its waste, anyone can you help me..我尝试了所有方法,但它是浪费,任何人都可以帮助我..
Please check my full code on fiddle,请检查我在小提琴上的完整代码,
Just want how to reset the field using jQuery
只想如何使用 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>
You can trigger the click of your reset button and clear the whole div in your document ready function.您可以触发重置按钮的单击并清除文档中准备好的 function 中的整个 div。 After this you can remove the class "selected" so its completely reset.
在此之后,您可以删除 class “选中”,使其完全重置。
Like this像这样
$(document).ready(function() {
$('select').multi({
search_placeholder: 'Search',
});
$('#tabReset').click(function() {
$('.selected-wrapper').empty();
$('a').removeClass('selected');
});
});
attach an event to reset button.将事件附加到重置按钮。 empty the
selected-wrapper
and remove the selected class from non-selected-wrapper
清空
selected-wrapper
并从non-selected-wrapper
器中删除选定的 class
$("button.alltabreset").click(function(){
$(".selected-wrapper").empty();
$(".item").removeClass("selected");
});
solution: https://jsfiddle.net/zuov3wmb/解决方案: https://jsfiddle.net/zuov3wmb/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.