Multiple drop down lists with the same behaviour with jquery

Question

This is suppose to be a very simple question, but I can't seem to figure it out.

I have forms over data type scenario, where someone can enter information about the services offered. So the form looks like this

1. [DropDown: serviceType] [DropDown: services] [TextBox: info]
2. [DropDown: serviceType] [DropDown: services] [TextBox: info] ... 5 [DropDown: serviceType] [DropDown: services] [TextBox: info]

I want the corresponding service list populated based on the selection Service Type list, so I have the following code:

$(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);
                }
            }
            );
        });
    });

I am having the following problems:

1. I am referencing a specific element ID, instead I would want that to be figured out programatically, since number of elements varies.
2. I want the services drop down to refresh on select change as well as well initially on load

Any help would be greatly appreciated!

Answer 1

I will assume that each triplet of ServiceType, Service, Info is encased in its own <div> container like so:

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

As you can see the ServiceType <select> is marked with the class attribute to make it easier to target. So assuming all your ServiceType lists have class=type, you can now write

$(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);
                         }
        });
    });
});

To have your service dropdownlist refresh on change should be pretty trivial by now:

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

To do anything on page load, simply include your statement inside the

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

block

Answer 2

Ok I was able to figure it out. This will update each cascading drop down list within a TR when the value changes as well as run this on load:

$(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);
    });