Multiple drop down lists with the same behaviour with jquery
<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>
