Q:

Get value of selectbox option without using .change()

I have a selectbox as follows:
<select id="select_search">
    <option value="search_contact">Contact</option>
    <option value="search_customer">Customer</option>
    <option value="search_employee">Employee</option>
    <option value="search_servEmp">Service Employee</option>
    <option value="search_servOrg">Service Org</option>
</select>

The above selectbox is part of a search form. When you submit the form, using an ajax request the results are returned to same page asynchronously.
On my results page (the one loaded asynchronously), I have a grouping of other select boxes that act as filters for the results. 
<select id="select_customer">
    <option value="">something</option>
</select>
<select id="select_contact">
    <option value="">something else</option>
</select>
etc....

How can I get the value of the original selectbox (#select_search) to show/hide the appropriate selectboxes that were loaded via ajax. (eg. if search_contact was the selected option, only show the select box with id="search_contact") 
The only way I'm familiar with is to get the value of the select box on change, but in this case the affected elements will not be loaded until after the change occurs.

A:

You can Try this in jsFiddle .
$(function () {
    $(document).on('change', '#select_search', function () {
        $('select:not(#select_search)').addClass('invisble');
        var selectSearchVal = $(this).find('option:selected').val();
        $('#select_' + selectSearchVal.replace('search_', '')).removeClass('invisble');
    });
});

