Question

I found a nice script for dropdowns. The thing is, I’m trying to have multiple dropdowns on the same page, but use the same class so I don’t have to duplicate the styles.

The script is form here:

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

I’ve downloaded the code and tried adding two on a page but when clicking on one of them, it triggers both. I’ve tried several things with .parent(), .children() etc but nothing has worked.

Could anyone help and point me in the right direction? Here’s the demo page where the source code can be seen:

http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/

UPDATE:
And here’s is a copy of that demo page I was working on: http://multideveloper.com/tests

Thanks a million!

Answer 1

This is because the drop down component assumes there is only one instance and binds to it by the class name.

With a few changes in the script, you can get multiple instances working. The summary of changes are below.

Demo: http://jsfiddle.net/fZbx6/1/

I’ve put in comments to highlight the changes.

$(document).ready(function() {
    $(".dropdown img.flag").addClass("flagvisibility");

    $(".dropdown dt a").click(function() {

        // old
        //$(".dropdown dd ul").toggle();

        // new
        $(this).parents(".dropdown").find("dd ul").toggle();

    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();

        // old
        //$(".dropdown dt a span").html(text);
        //$(".dropdown dd ul").hide();

        // NEW
        var dd = $(this).parents(".dropdown");
        dd.find("dt a span").html(text);
        dd.find("dd ul").hide();

        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

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


    $("#flagSwitcher").click(function() {
        $(".dropdown img.flag").toggleClass("flagvisibility");
    });
});