How to add a dynamic variable into a jQuery function

Question

I'm trying to modify a twitter widget where based on the dropdown, users can switch between the different search terms.

Instead of the present code where I have to define a keyword, I want to create a dropdown list of keywords so my users can select one and the relative tweets are shown. The Jquery I have in the head section is:

$(document).ready(function () {
    $('#tweets ul').twitterfeed('#keyword', {
        type: "query",
        count: 5
    })
});

And my select box code is:

<strong>Select your keyword</strong>:<select id="keyword">
<option value="ABC">ABC</option>
<option value="XYZ" selected="selected">XYZ</option>
</select>

Any help on how to fix this?

Thanks

Answer 1

$(document).ready(function () {
    $('#keyword').change(function() {
        // in the even handler this points to the element that triggered it
        $('#tweets ul').twitterfeed($(this).val(), {
            type: "query",
            count: 5
        })
    });
});