Autoriser plusieurs sélecteurs dans une seule fonction dans jquery

Question

J'ai une liste déroulante dans laquelle une "catégorie" peut être sélectionnée, si elle est modifiée, elle charge la nouvelle catégorie comme indiqué dans le code ci-dessous. J'ai depuis introduit un système de "sous-catégorie" et j'ai besoin de modifier légèrement ce code. J'ai trouvé les informations suivantes pour être très utile:

How to attach different events on multiple selectors through .on function in jquery?.

Cependant, cela ne résout pas tout à fait mon problème ... Je pourrais utiliser cela pour exécuter deux événements distincts pour chaque sélecteur dans la même fonction mais je dois exécuter les deux simultanément dans le cas d'une "catégorie" et " sous-catégorie "sont sélectionnés. Bien qu'ils doivent également être capables de fonctionner séparément, dans le cas où un seul est sélectionné. Je suis assez nouveau à js/jquery donc plus d'informations vous pouvez fournir le meilleur! Merci beaucoup!

<script type='text/javascript'> 
    $(document).ready(function() 
    { 
     $('select#selectCategory').change(function() 
     { 
      var cat = $('select#selectCategory').val(); 
      var subcat 

      if(cat > 0) 
      { 
       var param = '&category_id=' + cat; 
      }else{ 
       var param = ''; 
      } 
      var href = './videoroom.php?action=video_gallery'+ param +'&page=1'; 
      window.location.href = href; 
     }); 
    }); 
    </script> 

Voici la section HTML correspondant au code jquery déjà écrit:

 <select style="min-weight:100px;" name="filter_by_cat" id="selectCategory"> 
       <option value="0">All</option> 
       <option value="9">Wizard101</option> 
       <option value="10">Pirate101</option> 
       <option value="11">Pet Derby</option> 
       <option value="14">Misc/Fun</option> 
     </select> 

Et voici le nouveau bit j'ai ajouté pour le nouveau Sous-catégorie:

 <select style="min-weight:100px;" name="filter_by_subcat" id="selectSubCategory"> 
       <option value="0">All</option> 
       <option value="21">General PvP</option> 
       <option value="22">PvPC Matches</option> 
       <option value="23">PvP Guides</option> 
       <option value="24">Miscellaneous</option> 
     </select> 

Answer 1

Ajoutez l'écouteur d'événement aux deux listes déroulantes et cochez les deux lorsque l'un ou l'autre est modifié:

jsFiddle

$('#selectCategory, #selectSubCategory').change(function() { 
    var cat = $('#selectCategory').val(); 
    var subcat = $('#selectSubCategory').val(); 

    var params = [ 
     'action=video_gallery', 
     'page=1' 
    ]; 

    if (cat > 0) { 
     params.push('category_id='+ cat); 
     if (subcat > 0) { 
      params.push('subcategory_id='+ subcat); 
     } 
    } 

    var href = './videoroom.php?'+ params.join('&'); 
    window.location.href = href; 
}); 

Je suppose que vous voulez que le choix sous-catégorie à prendre en compte lorsque la catégorie principale est sélectionnée. Si ce n'est pas le cas, déplacez la seconde if-statement en dehors de la première.

J'ai également refaçonné un peu votre code pour le rendre plus facilement extensible et (IMO) plus propre. J'ajoute tous les params à un tableau et les rejoignent juste à la fin. Si vous avez besoin d'ajouter d'autres paramètres, mettez-les simplement dans le tableau.