How to call different JQuery functions from a dropdownlist?

Question

How do you bind each item in a dropdownlist to a different JQuery function?

For example I have a dropdown with different report names, I want each time you select the drop down to trigger a new report to display.

I accomplished this before with just straight text links with <a href="#" id="btnReport1">Report 1</a> which called $("#btnReport1").bind("click", function () {...}

I want to call the same function above from each of the different report items in the dropdownlist. There will be 5 or so I'll need to call. Is there a way to embed a link in each item? Do I use "change" somehow over "click" ?

I'm using Razor and MVC.Net so I could do something like @Html.DropdownList(...) with a SelectList object and put code in the controller file if need be. But I prefer to handle this on the HTML though.

Answer 1

sounds like you're trying to bind to a select dropdown. the best way to accomplish this is the onChange() handler (see the docs for details).

from there, you would simply determine which option had been selected based on the current value (probably obtained via the .val() method) and perform an action based on that value, using an series of if statements or another method.

Answer 2

Just call a single function on the click event and have it look at the value and decide what specific report to load from there.