Thursday, December 31, 2009

Dropdown Selected Change Event By JQuery

Now that I am working a lot more with jQuery I thought I would start posting little examples of why I enjoy using it so much.If you are looking for a full on beginner or selective tutorial you should head over to the tutorials section on the jQuery site, my example today about how to determine the selected value of combo box repeated into HTML table and followed by div will change its visibility due to the selected value.
$(document).ready(
function(){
// select all the divs and make it invisible
$("div.Content").css("display","none");
// Find all the combos inside the table or gridview
$("#tblItems").find("select.Status").each(function () {
// Attached function to the change event of each combo
$(this).change(function () {
if ($(this).val() == "test1")
{
// Change the visibility of the next div after the selected combo if the selected value = test1
$(this).parent().find("div.Content").fadeIn("slow");//css("display","block");
}
else
{
$(this).parent().find("div.Content").fadeOut("slow");//.css("display","none");
}
});
});
}); Hope this helps,

No comments:

Post a Comment