user342391 user342391 -4 years ago 52
jQuery Question

Jquery Hide/show using dropdown options not working IE or CHROME

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?

Answer Source

I would bind the "change" event to the SELECT instead, and then in the event handler, evaluate the value of the SELECT.

$("SELECT[name=kp1_action]").change(function()
{
    if(this.value == "transfercall") {
        ...
    }
    // OR
    if($(this).hasClass("shownextrow")) {
        ...
    }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download