Question

我用这个把头发拉了出来......我明白这很可能是错误的做法..但是我的手有点束缚..请尽量提供任何建议。

希望这足以解释这个问题。

欲望 - 在“控制行”上选择操纵“受控行”上的选择

问题 - 如果我执行while循环，则只有最后一列有效（控制顶行）

我意识到我可以单独处理每个列的代码而不是循环，但是想要对它进行组件化并保持它很小..

提前谢谢!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="en-us" />
        <title>Selects Duplicated</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
        $(document).ready(function(){ //runs when document.ready
            var $superduper;
                i=0;
                $Tbl_1 = "Tbl";

                while (i<=2)
                {
                    FltTbl = "#flt" + i + "_" + $Tbl_1;
                    FltTbl2 = "flt" + i + "_" + $Tbl_1 + "_" +"2";
                    ColContainer = "colcontainer" + i;

                    $((FltTbl)).clone().attr('id', (FltTbl2)).attr('class', (FltTbl2)).appendTo("#" + (ColContainer)).find('select > option:selected').each(function() {});
                    $(function() { 
                    $("#" + (FltTbl2)).change(function() { 
                    $((FltTbl)).val($(this).val()).trigger('change'); //this triggers when clone select changes //
                    });
                    });
                    i++;
                }
        });

        </script>

    </head>

    <body>
    <table id="Tbl0_2">
        <tr>
            <td width="70">
                <div>
                    <select id="flt0_Tbl" class="flt0_Tbl">
                        <option value="">--</option>
                        <option value="1-1">1-1</option>
                        <option value="1-2">1-2</option>
                        <option value="1-3">1-3</option>
                        <option value="1-4">1-4</option>
                    </select>
                </div>
            </td>
            <td width="70">
                <div>
                    <select id="flt1_Tbl" class="flt1_Tbl">
                        <option value="">--</option>
                        <option value="2-1">2-1</option>
                        <option value="2-2">2-2</option>
                        <option value="2-3">2-3</option>
                        <option value="2-4">2-4</option>
                    </select>
                </div>
            </td>
            <td width="70">
                <div>
                    <select id="flt2_Tbl" class="flt2_Tbl">
                        <option value="">--</option>
                        <option value="3-1">3-1</option>
                        <option value="3-2">3-2</option>
                        <option value="3-3">3-3</option>
                        <option value="3-4">3-4</option>
                    </select>
                </div>
            </td>
            <td>
            <div>Controlled Row</div>
            </td>
        </tr>
        <tr>
            <td width="70"><div class="colcontainer0" id="colcontainer0"></div></td>
            <td width="70"><div class="colcontainer1" id="colcontainer1"></div></td>
            <td width="70"><div class="colcontainer2" id="colcontainer2"></div></td>
            <td><div>Controlling Row</div></td>
        </tr>
        <tr>
            <td width="70"><div>Nope</div></td>
            <td width="70"><div>Nope</div></td>
            <td width="70"><div>Works</div></td>
        </tr>
    </table>
    </body>
    </html>

链接：http://jsfiddle.net/EpicVision/x9ASj/

Answer 1

问题是触发更改使用了循环所在的闭包中的选择器，因此选择器总是在循环结束时成为第三个选择框，因此将成为第三个选择器。用户点击了一些东西。

我已更新你的小提琴http://jsfiddle.net/steveukx/x9ASj/1/，以展示如何创建一个闭包来修复选择器的值。

（值得注意的是，在循环中创建闭包通常被认为是不好的做法）。

循环问题 - JavaScript - jQuery .Clone（）

1 个答案: