What is wrong with this jQuery if statement?

Question

The goal of this page is to show different options based on the drop down selection. The toggle is currently working as desired without the if statement in place. How can I adjust my if statement to do the correct comparison?

<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/SearchInventory.css" rel="stylesheet" />

<script>
    $(function () {
        $(".dropdown-menu li a").click(function () {
            var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
            if(selection =='Projectors') {
                $('#projectorSearch').toggle();
            }
        });
    });
</script>




<h2>Search Inventory</h2>

<div class="col-md-12">
    <div class="row">
        <div class="col-md-3">
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="dropDownSelectItemType" data-toggle="dropdown" aria-expanded="true">
                    Select an Item Type
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectItemType">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Projectors</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desktop Printers</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Network Printers</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tablets</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Televisions</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Polycom Phones</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cameras</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Monitors</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Leased Printers</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell Phones</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chair(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Keyboard(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Mouse(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Footrest(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Licensed Software</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desk Phones</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="projectorSearch" id="projectorSearch">
        <label>onomonpeia</label>
    </div>
</div>

Answer 1

you did well, but missed one thing.

var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());

this line will change text of .selection. but doesn't return $(this).text()

so you have to compare $(this).text() with string, not selection.

or just redefine the selection again, like these 2 lines.

$(this).parents(".btn-group").find('.selection').text($(this).text());
var selection = $(this).text()

Answer 2

You don't need to go arround to find the clicked text because you already have access to HTMLAnchorElement element referenced as this

Use

 var selection = $(this).text();

Instead of

 var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());

The full example:

$(function () {
    $(".dropdown-menu li a").click(function () {
        var selection = $(this).text();
        if(selection =='Projectors') {
            $('#projectorSearch').toggle();
        }
});

Here is a Working Sample