0

わかりましたので、上部に 3 つのドロップダウン リスト、その下に 6 つのドロップダウン リストがあります。下位 6 つはすべて ID (abc、def など) を持っています。上位 3 つは、これらの ID をそれぞれ 2 つ持っています (abc def、mno abc など)。泥のように透明？わかった。

したがって、誰かが abc def というラベルの付いた上部の ddl を選択した場合、選択した数量は下部の 2 つの ddl、abc と def に反映されます。簡単です。

特に上位の ddl の 2 つが下の同じ ddl にリンクしている場合、すべてを正しく連携させるのに問題があります。abc def と mno abc のように。

.packageQuantity ddls の .change イベントを作成して、上位 3 つの ddl のいずれかが変更されたときに 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 に答える