Plusieurs listes déroulantes avec le même comportement avec jquery

Question

Ceci est supposé être une question très simple, mais je n'arrive pas à le comprendre.

J'ai des formulaires sur un scénario de type de données, où quelqu'un peut entrer des informations sur les services offerts. Ainsi, la forme ressemble à ceci

1. [DropDown: serviceType] [DropDown: Services] [TextBox: Info]
2. [DropDown: serviceType] [DropDown: Services] [TextBox: Info] ... 5 [DropDown: serviceType] [DropDown: services] [TextBox: Info]

Je veux la liste de services correspondant population en fonction du service de sélection liste type, j'ai donc le code suivant:

$(document).ready(function() { 
     $("select#serviceType").change(function() { 
      var serviceId = $("#serviceType > option:selected").attr("value"); 

      $.ajax({ 
       type: "GET", 
       contentType: "application/json; charset=utf-8", 
       url: "GetServicesByServiceType/" + serviceId, 
       data: "{}", 
       dataType: "json", 
       success: function(data) { 
        var options = ''; 
        for (index in data) { 
         var service = data[index]; 
         options += "<option value='" + service.ServiceId + "'>" + service.Name + "</option>"; 
        } 
        $("#services").removeAttr('disabled').html(options); 
       } 
      } 
      ); 
     }); 
    }); 

je rencontre les problèmes suivants:

1. Je référence à un ID d'élément spécifique, au lieu je voudrais que pour être compris par programmation, puisque nombre d'éléments varie.
2. Je veux que les services tombent vers le bas pour se rafraîchir sur le changement de sélection, ainsi que bien d'abord la charge

Toute aide serait grandement appréciée!

Answer 1

Ok, j'ai été capable de comprendre. Cela mettra à jour chaque liste déroulante en cascade dans un TR lorsque la valeur change ainsi que l'exécuter sur le chargement:

$(document).ready(function() { 
     var populateDropDowns = function() { 
      var currentDropdown = $(this); 
      var serviceId = $(this).val(); 
      $.ajax({ 
       type: "GET", 
       contentType: "application/json; charset=utf-8", 
       url: "/GetServicesByServiceType/" + serviceId, 
       data: "{}", 
       dataType: "json", 
       success: function(data) { 
        var options = ''; 
        for (index in data) { 
         var service = data[index]; 
         options += "<option value='" + service.ServiceId + "'>" + service.Name + "</option>"; 
        } 

        currentDropdown.closest('tr').find("select.services").html(options); 
       } 
      } 
      ); 
     }; 

     $('select.currentServices').each(populateDropDowns); 
     $('select.currentServices').change(populateDropDowns); 
    }); 

Answer 2

Je suppose que chaque triplet de ServiceType, service, Info est enfermé dans son propre conteneur <div> comme ceci:

<div> 
    <select class="type"> 
     <option value="type1">ServiceType 1</option> 
     <option value="type2">ServiceType 2</option> 
    </select> 
    <select class="service"/> 
    <input type="text" /> 
</div>

Comme vous pouvez le voir le ServiceType <select> est marqué avec l'attribut class pour le rendre plus facile à cibler. Donc, en supposant que toutes vos listes de serviceType ont class=type, vous pouvez maintenant écrire

$(function(){ 
    $('select.type').change(function(){ 
     var serviceId=$(this).val(); //'this' keyword refers to 
            //the dropdownlist that triggered the event 
     $.ajax({ 
       ... //other stuff 
       success: function(data){ 
          ... //parse data 
          /*siblings('select') will select all 
           the other <select> elements in the same container, 
           which now happens to be the <select class='service'/> 
           inside the parent <div>*/ 
          $(this).siblings('select').removeAttr('disabled').html(options); 
         } 
     }); 
    }); 
}); 

Pour avoir votre service de rafraîchissement de dropdownlist sur le changement devrait être assez trivial maintenant:

$('select.service').change(function(){ 
    ... //do stuff here 
}); 

Pour tout faire de la charge de page, il suffit inclure votre déclaration dans le

$(function(){ 
    ...//will execute after dom is ready, ie after page loads 
});

bloc