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

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


    // x - attr, y - parent div

    function select(x, y) {
        // adds the selection as attribute
        $('body').on('click', '.dropdown ul a', function(e) {
            var text = $(this).text();
            $(this).closest('.dropdown').children('a').html(text + '<b class="caret"></b>');
            $(this).closest('.dd').attr('selection', text);
        });

        // replaces default dropdown text with text from selection attr

        function modified(_new, _select) {
            foo = $('#box').html();
            foo = $(_select).html(foo);
            foo = foo.find('.dropdown-toggle').html(_new + '<b class="caret"></b>');
        }

        // determines if DD has selection attr
        if (x > '') {
            return modified(x, y);
        } else {
            return hhh;
        }
    }

    // click event for 'click' button
    $('.sss a').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)) { // if click is in the same parent div
                
                // (this).find('.dd').html(select(_attr, _parent));
                
                $(this).find('.dd').each(function() {
                    var _select = $(this).attr('selection');
                    $(this).html(select(_select, _parent));
                    
                    var aaa = $(this);
                    console.log('asdf');
                });

                var asdf = $(this);
                console.log('***************');
                console.log();
                console.log('attr - ' + _attr);
               ...