CODEWITHSUNDEEP
javascriptjquery
Patrick
Patrick

Reputation: 821

Duplicating a dropdown "multiple select" in jQuery

I have a search page, where a user should be able to select multiple options in the search criteria, e.g. 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, e.g. 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.

Upvotes: 1

Views: 134

Answers (2)

fumihwh
fumihwh

Reputation: 1249

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);

      }
    });

Upvotes: 1

erratbi
erratbi

Reputation: 97

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

Upvotes: 1

Related Questions