Multiple Custom Dropdown Lists with jQuery

JavaScript
1

I have a Custom Dropdown Lists that converts Option tags to UL tags with jQuery. The Dropdown List is working perfectly as long as theres just one on each page.

I’m trying to figure out how i can have multiple Dropdown Lists (in this case two) on the same page, and how to populate the second Dropdown List (with say Cities from the Country) based on the selection made in the first Dropdown.

You can view the working code with one Dropdown List at http://jsfiddle.net/prodac/e36Xj/

        <p class="desc">The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally.</p>
        <select id="source">
            <option selected="selected" value="BR">Brasil</option>
            <option value="FR">France</option>
            <option value="DE">Germany</option>
            <option value="IN">India</option>
            <option value="JP">Japan</option>
            <option value="RS">Serbia</option>
            <option value="UK">United Kingdom</option>
            <option value="US">United States</option>
        </select>



$(document).ready(function() {
            createDropDown();

            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });

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

                var source = $("#source");
                source.val($(this).find("span.value").html())
            });
        });

        function createDropDown(){
            var source = $("#source");
            var selected = source.find("option[selected]");
            var options = $("option", source);

            $("body").append('<dl id="target" class="dropdown"></dl>')
            $("#target").append('<dt><a href="#">' + selected.text() +
                '<span class="value">' + selected.val() +
                '</span></a></dt>')
            $("#target").append('<dd><ul></ul></dd>')

            options.each(function(){
                $("#target dd ul").append('<li><a href="#">' +
                    $(this).text() + '<span class="value">' +
                    $(this).val() + '</span></a></li>');
            });
        }


body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.75em;
    color: #000;
}

.desc {
    color: #6b6b6b;
}

.desc a {
    color: #0092dd;
}

.dropdown dd, .dropdown dt, .dropdown ul {
    margin: 0px;
    padding: 0px;
}

.dropdown dd {
    position: relative;
}

.dropdown a, .dropdown a:visited {
    color: #816c5b;
    text-decoration: none;
    outline: none;
}

.dropdown a:hover {
    color: #5d4617;
}

.dropdown dt a:hover {
    color: #5d4617;
    border: 1px solid #d0c9af;
}

.dropdown dt a {
    background: #e4dfcb url(arrow.png) no-repeat scroll right center;
    display: block;
    padding-right: 20px;
    border: 1px solid #d4ca9a;
    width: 160px;
    padding: 5px;
}

.dropdown dt a span {
    cursor: pointer;
    display: block;
}

.dropdown dd ul {
    background: #e4dfcb none repeat scroll 0 0;
    border: 1px solid #d4ca9a;
    color: #C5C0B0;
    display: none;
    left: 0px;
    padding: 5px 0px;
    position: absolute;
    top: 2px;
    width: auto;
    min-width: 170px;
    list-style: none;
}

.dropdown span.value {
    display: none;
}

.dropdown dd ul li a {
    padding: 5px;
    display: block;
}

.dropdown dd ul li a:hover {
    background-color: #d0c9af;
}

.dropdown img.flag {
    border: none;
    vertical-align: middle;
    margin-left: 10px;
}

.flagvisibility {
    display: none;
}
2

Could it be because in your createDropDown() method you reference the source:

 var source = $("#source");

This suggests that there would only ever be 1 dropdown (because IDs are supposed to be unique per page). Instead, maybe add a class to the selects that you want to change:

<select id="source" class="dropdown-source">
  <option selected="selected" value="BR">Brasil</option>
  <option value="FR">France</option>
  ...
</select>

Now in your createDropDown() method, change source:

 var source = $("select.dropdown-source");

You can now iterate over the sources (using .each() for example) and create your custom dropdown lists (I’ll also suggest that you create a unique ID each of the dropdowns you generate)

3

The first part of my question is no solved! :smiley: The coce is a bit dirty, but it works and can be viewed at http://jsfiddle.net/prodac/stAAm/

My main question now is then how to automatically populate the second dropdown based on the selection made in the first one.
Say if I choose a contry in the first dropdown, then I want to display a list of cities from that country in the second dropdown.