I have a mutliple drop down menus that I am using to hide/show rows in my table.
Example:
<select name="kp1_action" class="longboxsmall">
<option class="hidenextrow" value="">Button Disabled</option>
<option class="showtransferoptions" value="transfercall">Transfer Call + Log Keypress to Reports</option>
<option class="shownextrow" value="logkeypress">Log Keypress to Reports Only</option>
<option class="shownextrow" value="optout">Optout of Call List</option>
</select>
I have assigned classes to each of the different options so I can trigger events when they are clicked this is my jQUERY.
$(".shownextrow").click(function() {
$(this).closest("tr").next().show().find('.longboxsmall').hide();
});
$(".showtransferoptions").click(function() {
$(this).closest("tr").next().show().find('.longboxsmall').show();
});
$(".hidenextrow").click(function() {
$(this).closest("tr").next().hide().find('.longboxsmall').hide();
});
Everything works perfectly in Firefox but not in IE or CHROME why is this?? IS there a better way of doing the above??