Binding onchange and onclick together jQuery not working

Question

On select change I am showing some divs and hiding others, and I am trying to handle the same from click as well. Its working fine on select change but not working on click. Here is my code, try selecting the second option as it has condition check added

EDIT: Here is the JSfiddle link as well

$(document).ready(function() {
    var option1 = $(".option1-wrapper");
    var option2 = $(".option2-wrapper");
    var option3 = $(".option3-wrapper");
    var option4 = $(".option4-wrapper");

    $('.tier3-wrapper, #option-selection').on('click change', function(e) {
        if (e.type === 'change' || this.id !== 'fund-selection') {
            $("select option:selected, .header").each(function() {
                if ($(this).attr("value") == "Option One") {
                    option1.removeClass('hidden');
                    option2.removeClass('hidden');
                    option3.removeClass('hidden');
                    option4.removeClass('hidden');
                }
                if ($(this).attr("value") == "Option Two" && $('a.header:contains("Option One")')) {
                    option1.removeClass('hidden');
                    option2.addClass('hidden');
                    option3.addClass('hidden');
                    option4.addClass('hidden');
                }
                if ($(this).attr("value") == "Option Three") {
                    option1.addClass('hidden');
                    option2.removeClass('hidden');
                    option3.addClass('hidden');
                    option4.addClass('hidden');
                }
                if ($(this).attr("value") == "Option Four") {
                    option1.addClass('hidden');
                    option2.addClass('hidden');
                    option3.removeClass('hidden');
                    option4.addClass('hidden');
                }
                if ($(this).attr("value") == "Option Five") {
                    option1.addClass('hidden');
                    option2.addClass('hidden');
                    option3.addClass('hidden');
                    option4.removeClass('hidden');
                }
            });
        }

    });
});

.hidden {
            display: none;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tier3-wrapper">
        <a class="header" href="#" target="_self">Option One</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Two</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Three</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Four</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Five</a>
    </div>
    <select class="form-control" id="option-selection">
        <option value="Option One">Option One</option>
        <option value="Option Two">Option Two</option>
        <option value="Option Three">Option Three</option>
        <option value="Option Four">Option Four</option>
        <option value="Option Five">Option Five</option>
    </select>
    <div class="option1-wrapper">
        <h1>Option 1</h1>
    </div>
    <div class="option2-wrapper">
        <h1>Option 2</h1>
    </div>
    <div class="option3-wrapper">
        <h1>Option 3</h1>
    </div>
    <div class="option4-wrapper">
        <h1>Option 4</h1>
    </div>

Answer 1

I can offer you the foolowing change. It keeps the logic for show/hide in a function but slipt the events.

$(document).ready(function () {
            var option1 = $(".option1-wrapper");
            var option2 = $(".option2-wrapper");
            var option3 = $(".option3-wrapper");
            var option4 = $(".option4-wrapper");

            function exec(name) {
             if (name == "Option One") {
                            option1.removeClass('hidden');
                            option2.removeClass('hidden');
                            option3.removeClass('hidden');
                            option4.removeClass('hidden');
                        }
                        if (name == "Option Two" && $('a.header:contains("Option One")')) {
                            option1.removeClass('hidden');
                            option2.addClass('hidden');
                            option3.addClass('hidden');
                            option4.addClass('hidden');
                        }
                        if (name == "Option Three") {
                            option1.addClass('hidden');
                            option2.removeClass('hidden');
                            option3.addClass('hidden');
                            option4.addClass('hidden');
                        }
                        if (name == "Option Four") {
                            option1.addClass('hidden');
                            option2.addClass('hidden');
                            option3.removeClass('hidden');
                            option4.addClass('hidden');
                        }
                        if (name == "Option Five") {
                            option1.addClass('hidden');
                            option2.addClass('hidden');
                            option3.addClass('hidden');
                            option4.removeClass('hidden');
                        }
            }

            $('#option-selection').on('change', function (e) {
                if (e.type === 'change' || this.id !== 'fund-selection') {
                    $("select option:selected, .header").each(function () {
                       exec($(this).attr("value"));
                    });
                }

            });

            $('.tier3-wrapper a').on('click', function (e) {
                       //exec($(this).child('a').text());
                       exec($(this).text().trim());
            });
     });