如何重新加载jquery dropkick对象

我使用一个简单的选择列表和jquery.dropkick库来使它美丽。 现在我想在更改相应的select元素后更改该dropkick内容（一个新选项进来）。 但只需调用$（’＃select’）。dropkick（）; 不起作用。

看起来它不受支持。 仅仅从头开始重建那个dropkick就足够了。 有没有可能“破坏”那个dropkick对象，然后通过调用.dropkick（）方法重建它？

Answer 1

我遇到了同样的问题，无法找到解决方案，但最终成功地使这个黑客工作。

$select = $("#select1"); $select.removeData("dropkick"); $("#dk_container_select1").remove(); $select.append("opt4"); $select.append("opt5"); $select.dropkick(); 

Answer 2

我利用Diode的答案来修改Dropkick代码，使其更加清晰：

 // Reload the dropkick select widget after options have changed // usage: $("...").dropkick('reload'); methods.reload = function () { var $select = $(this); var data = $select.data('dropkick'); $select.removeData("dropkick"); $("#dk_container_"+ data.id).remove(); $select.dropkick(data.settings); }; 

在dropkick.js中的以下代码段后面添加上面的代码：

 methods.reset = function () { ... }; 

然后你可以以编程方式使用它：

  $('#my-select').html("new options"); $('#my-select').dropkick('reload'); 

Answer 3

对于更新的访客。 Dropkick使用重置方法…不重绘。

 $("select").dropkick('reset'); 

Answer 4

我遇到了同样的问题，我对jquery-dropkick-1.0.0脚本进行了一些修补以解决这个问题。 我在dropkick对象中添加了forceSyncWithSelect方法。

以下是我所做的更改列表：

• 添加对标记的支持
• 添加autoWidth设置以将宽度保留为css
• 添加open，close，forceSyncWithSelect和isDropkicked的方法
• 保持默认tabindex 0
• 使用optgroup元素上的data-dkgroupclass属性添加optgroup类选项
• 修复forceSyncWithSelect方法，如果值出现多次，则仅执行第一次出现
• 切换点击菜单选项
• 阻止IE关闭滚动条交互菜单（滚动条交互启动模糊事件，这种行为是错误的）

您可能不希望所有这些更改，但您可以制作差异补丁并采取您需要的东西（如果您让更改日志或将其来源添加到标题中会很高兴，我想向Jamie Lottering提出这些更改，但是我需要建立一个git hub帐户才能这样做。

 /** * DropKick * * Highly customizable  lists * https://github.com/JamieLottering/DropKick * * © 2011 Jamie Lottering  *  * * Patch: * - 2012-03-30 godboutj, add support for  tag * - 2012-03-30 godboutj, add autoWidth settings to leave width to css * - 2012-05-25 godboutj, add method for open, close, forceSyncWithSelect and isDropkicked * - 2012-05-25 godboutj, keep default tabindex 0 * - 2012-08-09 godboutj, add optgroup class option with the data-dkgroupclass attribute on optgroup element * - 2012-08-15 godboutj, fix forceSyncWithSelect method if value appear multiple of time, take the first occurrence only * - 2012-09-07 godboutj, toggle on click on the menu selection * - 2012-09-25 godboutj, prevent IE from closing the menu on scroll bar interaction (a blur event is launched on scroll bar interaction, this behavior is so wrong) */ (function ($, window, document) { var ie6 = false; // Help prevent flashes of unstyled content if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { ie6 = true; } else { document.documentElement.className = document.documentElement.className + ' dk_fouc'; } var // Public methods exposed to $.fn.dropkick() methods = {}, // Cache every  element that gets dropkicked lists = [], // Convenience keys for keyboard navigation keyMap = { 'left': 37, 'up': 38, 'right': 39, 'down': 40, 'enter': 13 }, // HTML template for the dropdowns dropdownTemplate = [ '
', '', '{{ label }}', '', '
', '
', '
', '
', '
' ].join(''), // HTML template for dropdown options optionTemplate = '
{{ text }}
', optionGroupTemplate = '
{{ text }}
', // Some nice default values defaults = { startSpeed: 1000, // I recommend a high value here, I feel it makes the changes less noticeable to the user theme: false, change: false, autoWidth: true }, // Make sure we only bind keydown on the document once keysBound = false ; // Called by using $('foo').dropkick(); methods.init = function (settings) { settings = $.extend({}, defaults, settings); return this.each(function () { var // The current  element $select = $(this), // Store a reference to the originally selected  element $original = $select.find(':selected').first(), // Save all of the  and  elements $options = $select.children('option,optgroup'), // We store lots of great stuff using jQuery data data = $select.data('dropkick') || {}, // This gets applied to the 'dk_container' element id = $select.attr('id') || $select.attr('name'), // This gets updated to be equal to the longest  element width = settings.width || $select.outerWidth(), // Keep tabindex, even default value tabindex = ($select.attr('tabindex') != null && $select.attr('tabindex') != undefined) ? $select.attr('tabindex') : '', // The completed dk_container element $dk = false, theme ; // Dont do anything if we've already setup dropkick on this element if (data.id) { return $select; } else { data.settings = settings; data.tabindex = tabindex; data.id = id; data.$original = $original; data.$select = $select; data.value = _notBlank($select.val()) || _notBlank($original.attr('value')); data.label = $original.text(); data.options = $options; } // Build the dropdown HTML $dk = _build(dropdownTemplate, data); // Make the dropdown fixed width if desired if (settings.autoWidth) { $dk.find('.dk_toggle').css({ 'width': width + 'px' }); } // Hide the  list and place our new one in front of it $select.before($dk); // Update the reference to $dk $dk = $('#dk_container_' + id).fadeIn(settings.startSpeed); // Save the current theme theme = settings.theme ? settings.theme : 'default'; $dk.addClass('dk_theme_' + theme); data.theme = theme; // Save the updated $dk reference into our data object data.$dk = $dk; // Save the dropkick data onto the  element $select.data('dropkick', data); // Do the same for the dropdown, but add a few helpers $dk.data('dropkick', data); lists[lists.length] = $select; // Focus events $dk.bind('focus.dropkick', function (e) { $dk.addClass('dk_focus'); }).bind('blur.dropkick', function (e) { // Prevent IE from closing the menu on focus loose, // this make the menu close all the time when using the scroll bar if (!$.browser.msie) { $dk.removeClass('dk_open'); } $dk.removeClass('dk_focus'); }); setTimeout(function () { $select.hide(); }, 0); }); }; // Allows dynamic theme changes methods.theme = function (newTheme) { var $select = $(this), list = $select.data('dropkick'), $dk = list.$dk, oldtheme = 'dk_theme_' + list.theme ; $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme); list.theme = newTheme; }; // Force Value sync methods.forceSyncWithSelect = function () { var $select = $(this), $dk = $select.data('dropkick').$dk, $current = $dk.find("li [data-dk-dropdown-value='" + $select.val() + "']").first() ; _updateFields($current, $dk, true); }; // Reset all  value, and the dropdown label function _updateFields(option, $dk, reset) { var value, label, data; value = option.attr('data-dk-dropdown-value'); label = option.text(); data = $dk.data('dropkick'); $select = data.$select; $select.val(value); $dk.find('.dk_label').text(label); reset = reset || false; if (data.settings.change && !reset) { data.settings.change.call($select, value, label); } } // Set the currently selected option function _setCurrent($current, $dk) { $dk.find('.dk_option_current').removeClass('dk_option_current'); $current.addClass('dk_option_current'); _setScrollPos($dk, $current); } function _setScrollPos($dk, anchor) { var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length; $dk.find('.dk_options_inner').animate({ scrollTop: height + 'px' }, 0); } // Is dropdown openned function function _isDropdownOpenned($dk) { return $dk.hasClass('dk_open'); } // Close a dropdown function _closeDropdown($dk) { $dk.removeClass('dk_open'); } // Open a dropdown function _openDropdown($dk) { var data = $dk.data('dropkick'); $dk.find('.dk_options').css({ top: $dk.find('.dk_toggle').outerHeight() - 1 }); if (!$dk.hasClass('dk_open')) { $dk.addClass('dk_open'); } } // Toggle dropdown function _toggleOpenCloseDropDown($dk) { if (_isDropdownOpenned($dk)) { _closeDropdown($dk); } else { _openDropdown($dk); } } /** * Turn the dropdownTemplate into a jQuery object and fill in the variables. */ function _build(tpl, view) { var // Template for the dropdown template = tpl, // Holder of the dropdowns options options = [], $dk ; template = template.replace('{{ id }}', view.id); template = template.replace('{{ label }}', view.label); template = template.replace('{{ tabindex }}', view.tabindex); if (view.options && view.options.length) { for (var i = 0, l = view.options.length; i < l; i++) { var $option = $(view.options[i]), current = 'dk_option_current', oTemplate = optionTemplate, gTemplate = optionGroupTemplate ; if ($option.is('optgroup')) { gTemplate = gTemplate.replace('{{ text }}', $option.attr('label')); if ($option.attr('data-dkgroupclass') != undefined) { gTemplate = gTemplate.replace('{{ dataclass }}', $option.attr('data-dkgroupclass')); } // Support only one level as per W3C standard $option.children('option').each( function (index, element) { oTemplate = optionTemplate, oTemplate = oTemplate.replace('{{ value }}', $(element).val()); oTemplate = oTemplate.replace('{{ current }}', (_notBlank($(element).val()) === view.value) ? current : ''); oTemplate = oTemplate.replace('{{ text }}', $(element).text()); gTemplate += oTemplate; } ); options[options.length] = gTemplate; } else { oTemplate = oTemplate.replace('{{ value }}', $option.val()); oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : ''); oTemplate = oTemplate.replace('{{ text }}', $option.text()); options[options.length] = oTemplate; } } } $dk = $(template); $dk.find('.dk_options_inner').html(options.join('')); return $dk; } function _notBlank(text) { return ($.trim(text).length > 0) ? text : false; } $(function () { // Handle click events on the dropdown toggler $('.dk_toggle').live('click', function (e) { var $dk = $(this).parents('.dk_container').first(); _toggleOpenCloseDropDown($dk); if ("ontouchstart" in window) { $dk.addClass('dk_touch'); $dk.find('.dk_options_inner').addClass('scrollable vertical'); } e.preventDefault(); return false; }); // Handle click events on individual dropdown options $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) { var $option = $(this), $dk = $option.parents('.dk_container').first(), data = $dk.data('dropkick') ; _closeDropdown($dk); _updateFields($option, $dk); _setCurrent($option.parent(), $dk); e.preventDefault(); return false; }); // Setup keyboard nav $(document).bind('keydown.dk_nav', function (e) { var // Look for an open dropdown... $open = $('.dk_container.dk_open'), // Look for a focused dropdown $focused = $('.dk_container.dk_focus'), // Will be either $open, $focused, or null $dk = null ; // If we have an open dropdown, key events should get sent to that one if ($open.length) { $dk = $open; } else if ($focused.length && !$open.length) { // But if we have no open dropdowns, use the focused dropdown instead $dk = $focused; } if ($dk) { _handleKeyBoardNav(e, $dk); } }); }); })(jQuery, window, document); 

Answer 5

对于新访客。 Dropkick添加了重绘方法。

 $("select").dropkick('redraw'); 

Answer 6

 $('#select').html('a').dropkick('refresh');