title: Multiple drop down lists with the same behaviour with jquery
body: <p>This is suppose to be a very simple question, but I can't seem to figure it out.</p>
  
  <p>I have forms over data type scenario, where someone can enter information about the services offered. So the form looks like this</p>
  
  <ol>
  <li>[DropDown: serviceType] [DropDown: services] [TextBox: info]</li>
  <li>[DropDown: serviceType] [DropDown: services] [TextBox: info]
  ...
  5 [DropDown: serviceType] [DropDown: services] [TextBox: info]</li>
  </ol>
  
  <p>I want the corresponding service list populated based on the selection Service Type list, so I have the following code:</p>
  
  <pre><code>$(document).ready(function() {
          $("select#serviceType").change(function() {
              var serviceId = $("#serviceType &gt; 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 += "&lt;option value='" + service.ServiceId + "'&gt;" + service.Name + "&lt;/option&gt;";
                      }
                      $("#services").removeAttr('disabled').html(options);
                  }
              }
              );
          });
      });
  </code></pre>
  
  <p>I am having the following problems:</p>
  
  <ol>
  <li>I am referencing a specific element ID, instead I would want that to be figured out programatically, since number of elements varies.</li>
  <li>I want the services drop down to refresh on select change as well as well initially on load</li>
  </ol>
  
  <p>Any help would be greatly appreciated!</p>