javascript - 如何使多个选择结果/div 按照最近选择的顺序出现在顶部？

Question

当我从列表中进行多项选择时(请参阅下面的 fiddle )，如何让结果 (divs) 按最近选择的顺序显示在顶部？例如，如果我按 Nuts、Meats、Vegetables、Fruits 的顺序进行多项选择，我如何让结果 (divs) 以 Fruits、Vegetables、Meats、Nuts 的顺序出现？目前它们按照它们在框中列出的顺序出现。

https://jsfiddle.net/djj2c84t/

jQuery.fn.filterByText = function(mytextbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(mydropdown).find('option').each(function() {
      options.push({
        value: $(this).val(),
        text: $(this).text()
      });
    });
    $(mydropdown).data('options', options);
    $(mytextbox).bind('change keyup', function() {
      var options = $(mydropdown).empty().data('options');
      var search = $.trim($(this).val().replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"));
      var regex = new RegExp(search, "gi");

      $.each(options, function(i) {
        var option = options[i];
        if (option.text.match(regex) !== null) {
          $(mydropdown).append(
            $('<option>').text(option.text).val(option.value)
          );
        }
      });

    });
  });
};

$(function() {
  $('#mydropdown').filterByText($('#mytextbox'), true);
});

$(document).ready(function() {
  function exists(elemt, arr) {
    return (jQuery.inArray(elemt, arr) > -1);
  }

  $('#mydropdown').change(function() {
    var $selected = $(this).val();
    $('.mydivs1').each(function() {
      $(this).toggle()[
        (exists($(this).attr('match'), $selected)) ? 'show' : 'hide']();
    });
  });
});

我已经尝试了四个月来自己在网上搜索答案，但是，我发现的几乎所有建议都与“获得”或“接收”结果相关，而不是仅仅显示它们或使用我不想做的某个插件(Select2、Chosen 等)。

我一直在从网络上的示例中学习并进行自己的更改，因为我在 Javascript、JQuery 和 CSS 方面的知识非常有限，所以如果有人可以提供任何帮助，可能会提供任何示例代码，我将不胜感激以及代码需要去哪里。

还有一些其他问题我无法解决，但我不会一次发布太多问题，而是将它们单独发布。

谢谢。

Answer 1

希望我能正确理解您的问题。

例如我做了这个 fiddle :

编辑:

Fiddle Example

最好用:

$('option').click(function () {});

代替

$('#mydropdown').change(function() {});

我所做的是在我添加的“MainDiv”中重新绘制想要的 div