Dropdown function

app.js

;(function($) {
    var dropdown = {
        bindHandlers: function() {
            $(document).on('click', function() {
                $('.dropdown-wrapper').removeClass('active');
            });
        },

        init: function(el) {
            var self = this;
            var parent = $(el);
            var placeholder = $(el).children('span');

            $(el).on('click', function(e) {
                $(this).toggleClass('active');

                return false;
            });

            var options = self.options(el);

            $(options).on('click', function(e) {
                parent.addClass('chosen');
                $(this).parent().find('.active').removeClass('active');
                $(this).addClass('active');
                placeholder.html($(this).find('a').html());
            });
        },

        options: function(el) {
            return $(el).find('ul.dropdown > li');
        },
    };

    $(document).on('ready', function() {
        dropdown.bindHandlers();

        $('.dropdown-wrapper').each(function(i, el) {
            dropdown.init(el);
        });
    });
})(jQuery);

markup.html

<div class="dropdown-wrapper" tabindex="1">
    <span>Region</span>
    <?php include(__DIR__ . '/img/arrow-down.svg'); ?>
    <ul class="dropdown">
        <li><a href="#">Northwest</a></li>
        <li><a href="#">Northeast</a></li>
        <li><a href="#">Southwest</a></li>
        <li><a href="#">Southeast</a></li>
    </ul>
</div>