Question

我有一些我已经连线的下拉菜单，到目前为止一切正常。我现在想做的是动态创建一大堆这些控件。更多，我希望他们彼此独立行事，但功能完全相同。

这是我的HTML，非常基本的东西。 3个下拉菜单和一个模态窗口。每个下拉列表的选择将推动下一个下拉列表的选项。例如，用户从“类型”下拉列表中选择一个选项，并触发“方法”下拉列表以填充。 “规则”下拉列表是驱动模态（显示模态和模态内容）的原因。

所以仅仅为了学习目的，我构建了一个表，并且只复制/粘贴了两次元素。当然，第一组元素按预期运行，第二组元素无效。我知道我需要某种按钮（“添加行”）或其他东西，该按钮基本上会将原始HTML附加到tblTemplates对象（除非有更好的方法吗？）。

如何连接事件，以便id =“types”的所有下拉列表以相同的方式运行，但一次只能运行一个函数？例如，如果我在这个表的第2行..我选择我的类型，这会填充row2的“方法”下拉列表，然后我得到第2行的模态等等。

    <div id="Template">
        <table id="tblTemplates">
            <tr>
                <td>
                    <div class="Column">
                        Select Type :
                        <select id="types"></select>

                        Select Method:
                        <select id="methods"></select>

                        Select Rule:
                        <select id="rules"></select>
                        <div id="myModal" class="modal">

                            <div id="modalbuttons" class="modal-content">
                                <span id="btnModalClose" class="close">&times;</span>
                                <button id="btnSetRule">Set Rule</button>
                                <div id="modalContents" class="modal-content">
                                </div>
                            </div>

                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="Column">
                        Select Type :
                        <select id="types"></select>

                        Select Method:
                        <select id="methods"></select>

                        Select Rule:
                        <select id="rules"></select>
                        <div id="myModal" class="modal">

                            <div id="modalbuttons" class="modal-content">
                                <span id="btnModalClose" class="close">&times;</span>
                                <button id="btnSetRule">Set Rule</button>
                                <div id="modalContents" class="modal-content">
                                </div>
                            </div>

                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

这是我的javascript，我已经连接了事件

$(document).ready(function () {
    $("#types").change(function() {
        var selectedDatatype = $(this).find(":selected").val();

        $.ajax({
            type: "GET",
            url: "http://localhost:60...."
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                populateListDropdown("methods", result.Result);
            },
            error: function() {},
            timeout: 120000
        });
    });

        $("#methods").change(function() {
        var selectedType = $("#types").find(":selected").val();
        var selectedMethod = $(this).find(":selected").val();

        $.ajax({
            type: "GET",
            url: "http://localhost:60..."
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                populateListDropdown("rules", result.Result);
            },
            error: function() {},
            timeout: 120000
        });
    });
});

管理动态创建元素的事件

0 个答案: