Show/Hide <select> box based on value

[prodac]

Hi,

I’m trying to build a custom dropdownlist wich show/hide a second set of dropdowns based on it’s selection.

I was wondering if anyone here might be able to help with a solution to this.

You can view the code below or se a demo at http://jsfiddle.net/prodac/stAAm/

<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><div id="log"></div>
        <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>
        </select>
        <select id="source2a">
            <option selected="selected" value="BR">Cities in France</option>
            <option value="FR">France City 1</option>
            <option value="DE">France City 2</option>
            <option value="IN">France City 3</option>
            <option value="JP">France City 4</option>
            <option value="RS">France City 5</option>
            <option value="UK">France City 6</option>
            <option value="US">France City 7</option>
        </select>
         <select id="source2b">
            <option selected="selected" value="BR">Cities in Germany</option>
            <option value="FR">Germany City 1</option>
            <option value="DE">Germany City 2</option>
            <option value="IN">Germany City 3</option>
            <option value="JP">Germany City 4</option>
            <option value="RS">Germany City 5</option>
            <option value="UK">Germany City 6</option>
            <option value="US">Germany City 7</option>
        </select>
         <select id="source2c">
            <option selected="selected" value="BR">Cities in India</option>
            <option value="FR">India City 1</option>
            <option value="DE">India City 2</option>
            <option value="IN">India City 3</option>
            <option value="JP">India City 4</option>
            <option value="RS">India City 5</option>
            <option value="UK">India City 6</option>
            <option value="US">India City 7</option>
        </select>

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

var i = 0;
$(document).ready(function(){
    var bindClickToToggle = function(element){
        element.click(function(){
            $(this).parents('.dropdown').find('dd ul').toggle();
        });
    };
    
    var bindClickToUpdateSelect = function(element){
        element.click(function(){
            var text = element.html();
            var value = element.find('span.value').html();
            var dropdown = element.parents('.dropdown');
            var select = $( dropdown.attr('target') );
            dropdown.children('dt').find('a').html(text);
            dropdown.find('dd ul').hide();
            select.attr('value', value);
        });
    };
    
    var getItemHtml = function(element){
        return '<dt><a href="#">'+element.text()+'<span class="value">'+element.attr('value')+'</span></a></dt>';
    };
    
    var getDropdownHtml = function(id, target){
        return '<dl id="target'+id+'" class="dropdown" target="#'+target.attr('id')+'"></dl>';
    };
    
    var getEnclosingHtml = function(){
        return '<dd><ul></ul></dd>';
    };
    
    var createDropDown = function(element, appendTo){
        var selected = element.find('option[selected]');
        var options = element.find('option');
        appendTo.append(getDropdownHtml(i, element));
        var target = appendTo.find('#target' + i);
        target.append(getItemHtml(selected));
        target.append(getEnclosingHtml());
        var appendOptionsTo = target.find('ul');
        options.each(function(){
            appendOptionsTo.append(getItemHtml($(this)));
        });
        appendOptionsTo.find('a').each(function(){
            bindClickToUpdateSelect($(this));
        });
        i++;
    };
    
    $('select').each(function(){
        createDropDown($(this), $('body'));
    });
    $('a').each(function(){
        bindClickToToggle($(this));
        $(this).click(function(){
            $(this).parents('ul').hide();
        });
    });
    
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown")){
            $(".dropdown dd ul").hide();
        }
    });
});