Jquery Скрыть / показать с помощью выпадающих опций не работает IE или CHROME

Question

У меня есть несколько выпадающих меню, которые я использую, чтобы скрыть / показать строки в моей таблице.

Пример:

 <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>

Я назначил классы для каждой из различных опцийтак что я могу инициировать события, когда на них нажимают, это мой 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();
});

Все отлично работает в Firefox, но не в IE или CHROME, почему это?Есть ли лучший способ сделать выше?

Answer 1

Я бы вместо этого связал событие "изменение" с SELECT, а затем в обработчике событий оценил значение SELECT.

$("SELECT[name=kp1_action]").change(function()
{
    if(this.value == "transfercall") {
        ...
    }
    // OR
    if($(this).hasClass("shownextrow")) {
        ...
    }
});