0

好的，所以我在顶部有 3 个下拉列表，在其下方有 6 个。底部的 6 个都有一个 id，（abc、def 等）。前 3 个 ID 中的每一个都有两个（abc def、mno abc 等）。清如泥？好的。

因此，如果有人选择了标记为 abc def 的顶部 ddl，那么他们选择的数量应该反映在底部的两个 ddl 中，即 abc 和 def。很容易。

我在使其全部正常工作时遇到问题，尤其是当两个顶级 ddls 链接到下面的同一个 ddl 时。像 abc def 和 mno abc。

我为 .packageQuantity ddls 创建了使用 .change 事件，以便在更改前 3 个 ddls 之一时触发 jquery。

代码粘贴在下面，我知道它很小，（至少我希望如此）。谢谢！

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(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] > -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] > -1) {
                            //set the total value for the price ddl
                            alert(ids[childItem]);
                            $(item).val(ids[childItem]);
                        }
                    }
                });
            });
        });
    });               //close of ready function
    </script>
</head>
<body>
<form id="form1" runat="server">
<table>
    <tr>
        <td>
            abc def
        </td>
        <td>
            <asp:DropDownList ID="ddlPackage1" runat="server" CssClass="packageQuantity abc def" />
        </td>
    </tr>
    <tr>
        <td>
            mno abc
        </td>
        <td>
            <asp:DropDownList ID="ddlPackage2" runat="server" CssClass="packageQuantity mno abc" />
        </td>
    </tr>
    <tr>
        <td>
            mno pqr
        </td>
        <td>
            <asp:DropDownList ID="ddlPackage3" runat="server" CssClass="packageQuantity mno pqr" />
        </td>
    </tr>
    <tr>
        <td>
            <br />
        </td>
    </tr>
    <tr>
        <td>
            abc
        </td>
        <td>
            <asp:DropDownList ID="ddlPrice1" runat="server" CssClass="priceQuantity abc" />
        </td>
    </tr>
    <tr>
        <td>
            def
        </td>
        <td>
            <asp:DropDownList ID="ddlPrice2" runat="server" CssClass="priceQuantity def" />
        </td>
    </tr>
    <tr>
        <td>
            ghi
        </td>
        <td>
            <asp:DropDownList ID="ddlPrice3" runat="server" CssClass="priceQuantity ghi" />
        </td>
    </tr>
    <tr>
        <td>
            jkl
        </td>
        <td>
            <asp:DropDownList ID="ddlPrice4" runat="server" CssClass="priceQuantity jkl" />
        </td>
    </tr>
    <tr>
        <td>
            mno
        </td>
        <td>
            <asp:DropDownList ID="ddlPrice5" runat="server" CssClass="priceQuantity mno" />
        </td>
    </tr>
    <tr>
        <td>
            pqr
        </td>
        <td>
            <asp:DropDownList ID="ddlPrice6" runat="server" CssClass="priceQuantity pqr" />
        </td>
    </tr>
</table>
</form>
</body>
</html>
4

1 回答 1

1

这是一个小提琴。一旦您将所有可能的选项拉到一个不同的列表中，这非常简单。

http://jsfiddle.net/Tq5tn/1/

(function(){
    var values = [];

    function initValues() {
        $("select.priceQuantity").each(function(){
            values = values.concat(this.className.split(" "));      
        });
        values = $.unique(values).filter(function(v){ return v != "priceQuantity" });
    }

    function updateValues(){
        var i = values.length;
        while(i--){
            var n = 0;
            $("select.packageQuantity." + values[i])
                .each(function(idx,el){ n += parseInt($(el).val(), 10) } );
            $("select.priceQuantity." + values[i]).val(n);
        }
    }

    $(document).ready(initValues);
    $(".packageQuantity").change(updateValues);
    $(".priceQuantity").change(updateValues); // what is supposed to happen here?

})();
于 2013-05-24T02:19:59.673 回答