<form id="productSearch" method="get" action="">
    <label for="productCats">Filter by:</label>
    <select id="productCats">
        <option value="">ALL</option>
        <option value="consulting">Consulting</option>
        <option value="research">Research</option>
        <option value="training">Training</option>

    </select>
</form>  <!-- #productSearch -->

<div id="productSearchResults"></div>

<script type="text/javascript">
    $(document).ready(function() {
        var showProducts = function(cat) {
            $.getJSON("/JSONContent/",
                {
                    type: 'json',
                    q: '%2BstructureName:product%20%2Bcategories:' + cat
                },
                function(data) {
                    $('#productSearchResults').append('<ul></ul>');
                    $.each(data.contentlets, function(i, contentlet) {
                            $('#productSearchResults ul').append('<li>' + contentlet.title + '</li>');
                    });
                }
            );
        };

        $('#productCats').change(function() {
            var cat = $(this).val();
            showProducts(cat);
        });
    });
</script>