Duplicating a dropdown “multiple select” in jQuery

Question

I have a search page, where a user should be able to select multiple options in the search criteria, eg when for example selecting search criteria for a Haircolor, instead of the user only being able to select one type of haircolor, they should be able to select multilple types for hair color to search on.

This is represented here:

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

However, now I need to create another one that does the exact same thing, but with other criterias, eg interests.

How I want the code to work is shown here: https://jsfiddle.net/nno5fgn6/1/ But this is only where I have dublicated the code twice, but when I need to have for example 6 of these dropdown's, this doesn't seem like the best way to do so.

How do I do that in the first jsfiddle above?

All of these select dropdowns are represented within a form, so that I can pass the values, and query these.

All of this works as it should - also the duplicate code, but again this isn't a nice way to approch this with 6 search criterias.

Looking forward to hearing your thoughts.

Answer 1

You could try something like this 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);

        }
    });

where you use .parents() fn to access relatively contained elements

Answer 2

Here is an example.

Main idea is use same class and .closest() to find current dropdown.

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

      }
    });