How do I build more than 1 drop-down selector menu on the same table/layer in Google Fusion Table?

Question

I've created a series of Google Fusion Table maps on my site, Community Media Database, which allow the user to toggle on and off multiple layers. For each layer, I've also built ONE drop-down select menu, allowing the viewer to filter the displayed results based on that one selector.

I'm at a point now where I need to create more than one drop down select menu for each layer. For exapmle, in the linked map, I'd like to allow the viewer to view access TV providers by not only management type, but also by carriage of local election-related programs, and a number of other fields, as well.

I'm still fairly new at Googgle FT, and barely know my way around JavaScript. I've tried copying and pasting some examples of code, but I believe I'm not correctly establishing unique variables. They end of conflicting somehow, and none of them work.

Can someone help me learn what would be the simple approach to creating more than one select menu on a single Google Fusion Table/map layer? Thanks!

~ Rob McCausland, CommunitymediaDatabase.org

Answer 1

Well issue one is being able to retrieve values from your select lists. I give all my select lists an id and use jQuery.js to access those values using:

var value = $('#program_select_id').val();

Second is chaining your query conditions via ' AND ' which your code already seems to grasp.

Here's an example of some jQuery dependent code that I use:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

<script type="text/javascript">

function setQuery(ft_layer, current_table_id, location_col)
{
    var query = [];

    var value = $('#program_select_id').val();
    if(value !== ''){
        query.push("'program' = '" +  value + "'");
    }
    value = $('#provider_select_id').val();
    if(value !== ''){
        query.push("'data_provider' = '" +  value + "'");
    }
    value = $('#observable_select_id').val();
    if(value !== ''){
        query.push("observables CONTAINS '" + value + "'");
    }

    var where = query.join(' AND ');

    var qryOpts = {
      query: {
        select: location_col,
        from: current_table_id,
        where: where
      }
    };
    ft_layer.setOptions(qryOpts);
}

</script>