Jquery Masquer/afficher en utilisant les options de la liste déroulante ne fonctionne pas IE ou CHROME

Question

J'ai un plusieurs menus déroulants que j'utilise pour cacher/montrer des lignes dans ma table.

Exemple:

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

J'ai assigné des classes à chacune des différentes options que je peux déclencher des événements quand on clique dessus c'est mon 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(); 
}); 

Tout fonctionne parfaitement dans Firefox mais pas dans IE ou CHROME pourquoi est-ce? Y a-t-il une meilleure façon de faire ce qui précède?

Answer 1

Je lierais plutôt l'événement "change" au SELECT, puis dans le gestionnaire d'événements, j'évaluerais la valeur du SELECT.

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