在jQuery中復制下拉菜單“ multiple select”

Question

我有一個搜索頁面，用戶應該能夠在搜索條件中選擇多個選項，例如當選擇一種染發的搜索條件時，而不是用戶只能選擇一種染發類型，他們應該能夠選擇多種類型的發色進行搜索。

這表示在這里：

https://jsfiddle.net/ztjzcLL0/1/

但是，現在我需要創建另一個功能完全相同的東西，但是要符合其他條件，例如興趣。

我希望代碼的工作方式如下所示： https ://jsfiddle.net/nno5fgn6/1/但這只是我將代碼兩次復制兩次的地方，但是當我需要例如這些下拉菜單中的6個時，這不會似乎不是最好的方法。

我如何在上面的第一個jsfiddle做到這jsfiddle ？

所有這些選擇下拉列表都在一個表單中表示，因此我可以傳遞值並查詢它們。

所有這一切都應該正常工作-也是重復的代碼，但是這也不是用6個搜索條件來解決這個問題的好方法。

期待聽到您的想法。

Answer 1

您可以嘗試這樣的事情https://jsfiddle.net/nno5fgn6/2/

    $(".dropdown dt a").on('click', function() {
        $(this).parents('.dropdown').find("dd ul").slideToggle('fast');
    });

    $(".dropdown dd ul li a").on('click', function() {
        $(this).parents('.dropdown').find("dd ul").hide();
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
    });

    $('.mutliSelect input[type="checkbox"]').on('click', function() {
        var dd = $(this).parents('.dropdown');
        var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
            title = $(this).val() + ",";

        if ($(this).is(':checked')) {
            var html = '<span title="' + title + '">' + title + '</span>';
            dd.find('.multiSel').append(html);
            dd.find(".hida").hide();
        } else {
            $('span[title="' + title + '"]').remove();
            var ret = $(".hida");
            $('.dropdown dt a').append(ret);

        }
    });

使用.parents（）fn訪問相對包含的元素的地方

Answer 2

這是一個例子。

主要思想是使用相同的類和.closest()查找當前下拉列表。

    $(".dropdown dt a").on('click', function() {
      $(this).closest('.dropdown').find("dd ul").slideToggle('fast');
    });

    $(".dropdown dd ul li a").on('click', function() {
      $(this).closest('.dropdown').find("dd ul").hide();
    });

    $(document).bind('click', function(e) {
      var $clicked = $(e.target);
      if (!$clicked.parents().hasClass("dropdown")) {
        $clicked.closest('.dropdown').find("dd ul").hide();
      }
    });

    $('.mutliSelect input[type="checkbox"]').on('click', function() {
      var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
        title = $(this).val() + ",";
      var $currentDropdown = $(this).closest('.dropdown');

      if ($(this).is(':checked')) {
        var html = '<span title="' + title + '">' + title + '</span>';
        $currentDropdown.find('.multiSel').append(html);
        $currentDropdown.find(".hida").hide();
      } else {
        $currentDropdown.find('span[title="' + title + '"]').remove();
        var ret = $currentDropdown.find(".hida");
        $currentDropdown.find('dt a').append(ret);

      }
    });