Master Dropdown

by nosfan1019

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
        <div id="box">
            <div class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Email<b class='caret'></b></a>
                <ul id='menu1' class='dropdown-menu'>
                    <li><a href='#'>Work</a></li>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>Mobile</a></li>
                </ul>
            </div>
        </div>

<div class='top one'>
    <div class='sss aaa'>
        <div class='dd'></div>
        <a href='#'>click</a>
    </div>
    <div class='sss bbb'>
        <div class='dd'></div>
        <a href='#'>click</a>
    </div>
</div>   

<div class='top two'>
    <div class='sss aaa'>
        <div class='dd'></div>
        <a href='#'>click</a>
    </div>
    <div class='sss bbb'>
        <div class='dd'></div>
        <a href='#'>click</a>
    </div>
</div>  

<div class='top three'>
    <div class='sss aaa'>
        <div class='dd'></div>
        <a href='#'>click</a>
    </div>
    <div class='sss bbb'>
        <div class='dd'></div>
        <a href='#'>click</a>
    </div>
</div>

CSS

body {
    margin: 30px;
}

.sss {
    display: inline-block;
    float: left;        
    clear: both;        
    padding: 10px;
    margin: 10px 0;                
    background: #eee;
}

.sss > div {
    width: 100px;
    display: inline-block;
}

.top {
    display: inline-block;
    background: #ddd;
    padding: 20px;
    margin: 30px 0 0 30px;
}

JavaScript

/**
 * @author bot
 */

$(function() {
    $('#box').hide();
    _html = $('#box').html();

    // x - [selection] attr, y - parent div    
    function select(x, y) {
        console.log("select");
        $('body').on('click', '.dropdown ul a', function(e) {
            var text = $(this).text();
            console.log("text = ", text);
            $(this).closest('.dropdown').children('a').html(text + '<b class="caret"></b>');
            $(this).closest('.dd').attr('selection', text);
        });

        function modified(_select) {
            console.log("modify");
            foo = $('#box').html();
            foo = $(_select).html(foo);
            
            // iterate on collection to restore selected value from selection tag;
            foo.filter("div[selection]").each(function(i, v) {
                var selected = $(v).attr('selection');
                $(v).find('.dropdown-toggle').html(selected + '<b class="caret"></b>');  
            });                
        }
        
        console.log("x =", x);

        // determinate if any of parentDiv has [selection] attr
        if($(y).filter("div[selection]").length > 0){
            return modified(y);
        }         
        else {
            return _html;
        }
    }

    // click event for 'click' button
    $('body').on('click',function(e) {
        e.stopPropagation();
        _attr         = $(e.target).closest('.sss').find('.dd').attr('selection');
        _parent     = $(e.target).closest('.top').find('.dd');       
        _container     = $(e.target).closest('.top').attr('class');

        // gathers all three container divs
        $(e.target).closest('.top').siblings('.top').andSelf().each(function() {
            
            if ($(this).hasClass(_container)) { 
                $(this).find('.dd').html(select(_attr, _parent));
            } 
            else if (!$(this).hasClass(_container)) {
                $(this).find('.dd').empty();
            }
            
     ...