Дублирование выпадающего меню «множественный выбор» в jQuery

Question

У меня есть страница поиска, где пользователь должен иметь возможность выбирать несколько параметров в критериях поиска, например. когда, например, выбирая критерии поиска для Haircolor, вместо того, чтобы пользователь мог выбирать только один тип волос, они должны иметь возможность выбирать многоуровневые типы для цвета волос для поиска.

Это представлено здесь:

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

Однако, теперь мне нужно создать еще один, который делает ту же самую вещь, но и с другими критериями, например, интересы.

Как я хочу, чтобы код работы показан здесь: https://jsfiddle.net/nno5fgn6/1/ Но это только там, где я dublicated код дважды, но когда мне нужно иметь, например, 6 из них выпадающих, это не кажется лучшим способ сделать это.

Как это сделать в первом jsfiddle выше?

Все эти выбираемые выпадающие списки представлены в форме, поэтому я могу передать значения и запросить их.

Все это работает так же, как и должно быть - дубликат кода, но опять же это не очень хороший способ для этого с 6 критериями поиска.

С нетерпением ждем ваших мыслей.

Answer 1

Here является примером.

Основная идея - использовать тот же класс и .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); 

     } 
    }); 

Answer 2

Вы могли бы попробовать что-то вроде этого 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 для доступа к относительно содержатся элементы