Hide div element if attribute does not match filter

Question

I am building a simple filter feature onto my website.

Once the user selects a location from the .start-address and .end-address dropdown, and then presses #go-button, how would I only show the div's which contain a <span class="waypoint"></span> wherein the custom attribute waypoint matches either what is in .start-address and .end-address.

Please note that I want to hide the entire waypoint-detail if a match is not found in the waypoints within it, not just a single waypoint.

I have mocked up a quick jsFiddle to show this: http://jsfiddle.net/tLhdndgx/3/.

HTML

<div class="row">
    <div class="col-md-4">Start:
        <br>
        <select class="form-control start-address">
            <option value="Lab">Lab</option>
            <option value="Hall">Hall</option>
            <option value="Apartments">Apartments</option>
            <option value="Church">Church</option>
            <option value="Park">Park</option>
            <option value="College">College</option>
        </select>
    </div>
    <br>
    <div class="col-md-4">Destination:
        <br>
        <select class="form-control end-address">
            <option value="Lab">Lab</option>
            <option value="Hall">Hall</option>
            <option value="Apartments">Apartments</option>
            <option value="Church">Church</option>
            <option value="Park">Park</option>
            <option value="College">College</option>
        </select>
    </div>
    <br>
    <div class="col-md-4">
        <button type="button" class="btn btn-success" id="go-button">Go</button>
    </div>
</div>
<br>
<div class="panel panel-default waypoint-detail" style="display: block;">
    <div class="panel-body">
        <strong>Waypoint Set 1</strong>
        <br>
        <br>
        <center>
            <span style="color:#449D44">Start</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Hall">Hall</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Apartments">Apartments</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Church">Church</span>
            <br>↓<br>
        </center>
        <center><span style="color:#c12e2a">Stop</span></center>
    </div>
</div>
<div class="panel panel-default rideshare-detail" style="display: block;">
    <div class="panel-body">
        <strong>Waypoint Set 2</strong>
        <br>
        <br>
        <center>
            <span style="color:#449D44">Start</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Hall">Park</span>
                <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="College">College</span>
            <br>↓<br>
        </center>
        <center><span style="color:#c12e2a">Stop</span></center>
    </div>
</div>

JavaScript

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.destination-address').val();
});

Answer 1

Here's a start. Simply assign the right elements to a variable and show those.

$('body').on('click', '#go-button', function (event) {
    ...
    var myDivs = $('.waypoint[waypoint=' + startAddress + ']');

    myDivs.show();
});

Demo

Notice that I've hidden the divs initially with CSS. This prevents weirdness at page load.

Here's a simplistic way to get it all. There's a way to combine those selectors, but it escapes me at the moment.

Demo 2

You'll probably want to restructure to put your arrows inside the hide/show divs.

Answer 2

This should do it. http://jsfiddle.net/tLhdndgx/10/

var waypoints = $('.waypoint'),
    details = $('.waypoint-detail');

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    details.hide();
    waypoints.filter(function(){
        var self = $(this),
            waypoint = self.attr('waypoint');
        return (waypoint == startAddress || waypoint == destinationAddress);
    }).parent(details).show();
});