Using jQuery to manipulate drop down lists that are linked by css classes
<p>Okay so I have 3 drop down lists at the top and 6 below that. The bottom 6 all have an id, (abc, def, etc). The top 3 have two of each of those ids, (abc def, mno abc, etc). Clear as mud? Okay.</p>

<p>So if someone selects the top ddl labeled abc def, then the quantity that they selected should be reflected in the bottom two ddls, abc and def. Easy enough. </p>

<p>I am having problems making it all work correctly together, especially when two of the top ddls link to the same ddl below. Like abc def and mno abc.</p>

<p>I created use the .change event for the .packageQuantity ddls, so that the jquery will fire when one of the top 3 ddls is changed. </p>

<p>Code is pasted below, I know it's something small, (at least I hope). Thanks!</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript"&gt;
    $(document).ready(function () {
        $(".packageQuantity").change(function () {
            var currValue = $(this).attr("value");

            //create the array to hold our ids
            var ids = new Array();

            //get all of the css classes from the sender
            var classList = $(this).attr("class").split(/\s+/);

            //loop through those classes
            $.each(classList, function (index, item) {
                if (item != "packageQuantity") {
                    //store just the actual ids
                    ids[item] = 0;
                    //ids.push(item);
                }
            });

            //get all of the package ddls
            var srcs = $(".packageQuantity");

            //something to keep the total value in 
            var total = 0

            //loop through all of the package ddls
            $.each(srcs, function (index, item) {
                //get all of the classes for the current ddl
                var itemClasses = $(item).attr("class").split(/\s+/);

                //loop through the classes for the current ddl
                $.each(itemClasses, function (childIndex, childItem) {

                    //all we want are the classes that are ids
                    if (childItem != "packageQuantity") {

                        //lets see if any of these ids are in the sender too
                        if (ids[childItem] &gt; -1) {

                            //add the current value of the ddl to the total
                            total = parseInt($(item).attr("value"), 10) + total;

                            ids[childItem] = total;
                        }
                    }
                });
            });

            //loop through and remove the value of the current ddl
            //from the totals
            $.each(ids, function (index, item) {
                var temp = ids[item];
                ids[item] = temp - currValue;
            });

            //get the price drop down lists
            var ddls = $(".priceQuantity");

            //loop through price ddls 
            $.each(ddls, function (index, item) {
                //get the classes for the current ddl
                var itemClasses = $(item).attr("class").split(/\s+/);

                //loop through the classes
                $.each(itemClasses, function (childIndex, childItem) {

                    //all we want are the classes that are ids                        
                    if (childItem != "priceQuantity") {

                        //is this ddl one of the ones we want to set?
                        if (ids[childItem] &gt; -1) {
                            //set the total value for the price ddl
                            alert(ids[childItem]);
                            $(item).val(ids[childItem]);
                        }
                    }
                });
            });
        });
    });               //close of ready function
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;
            abc def
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPackage1" runat="server" CssClass="packageQuantity abc def" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            mno abc
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPackage2" runat="server" CssClass="packageQuantity mno abc" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            mno pqr
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPackage3" runat="server" CssClass="packageQuantity mno pqr" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;br /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            abc
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPrice1" runat="server" CssClass="priceQuantity abc" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            def
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPrice2" runat="server" CssClass="priceQuantity def" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            ghi
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPrice3" runat="server" CssClass="priceQuantity ghi" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            jkl
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPrice4" runat="server" CssClass="priceQuantity jkl" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            mno
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPrice5" runat="server" CssClass="priceQuantity mno" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            pqr
        &lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlPrice6" runat="server" CssClass="priceQuantity pqr" /&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
