Duplizieren eines Dropdown-Menüs "Mehrfachauswahl" in jQuery

Question

Ich habe eine Suchseite, auf der ein Benutzer mehrere Optionen in den Suchkriterien auswählen können, z. Wenn zum Beispiel Suchkriterien für eine Haarfarbe ausgewählt werden, anstatt dass der Benutzer nur eine Art von Haarfarbe auswählen kann, sollte er in der Lage sein, mehrere Arten von Haarfarben für die Suche auszuwählen.

Dies ist hier vertreten:

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

Aber jetzt muss ich einen anderen erstellen, die genau die gleiche Sache tut, aber mit anderen Kriterien, z.B. Interessen.

Wie möchte ich den Code zu arbeiten, ist hier zu sehen: https://jsfiddle.net/nno5fgn6/1/ Das ist aber nur dann, wenn ich den Code zweimal vervielfältigt haben, aber wenn ich zum Beispiel 6 dieser Dropdown die haben müssen, dies scheint nicht wie die beste Möglichkeit, dies zu tun.

Wie mache ich das in der ersten jsfiddle oben?

Alle diese Auswahl Dropdowns werden in einem Formular dargestellt, so dass ich die Werte übergeben und diese abfragen kann.

All dies funktioniert wie es sollte - auch der doppelte Code, aber auch dies ist keine nette Möglichkeit, dies mit 6 Suchkriterien zu lösen.

Ich freue mich darauf, Ihre Gedanken zu hören.

Answer 1

Here ist ein Beispiel zuzugreifen.

Grundidee ist die gleiche Klasse und .closest() verwenden, um das aktuelle Dropdown zu finden.

$(".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); 

     } 
    }); 

Answer 2

Man könnte so etwas wie dieses 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); 

     } 
    }); 

versuchen, wo Sie .parents() fn verwenden relativ Elemente enthalten