javascript - 当选择的选项填充时(所有元素之间都有动态ID)

我搜索了类似的问题，发现了一些问题，但是他们的解决方案没有帮助我。
例如：

First question

Second question

我的问题是：

我有一个表，用户可以动态添加行，因此我正在为每行以及其中的所有元素创建唯一的ID。
每行都有两个文本字段，并使用两个选项进行选择，并且当您选择一个选项时，文本字段应为dislpay：block，第二个文本将显示为“ none”，具体取决于您的选择。

我在这里构建了一些示例，该示例将显示常规结构（JSFiddle）

<table>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td>
        <input id="description-first-1" name="description-first-1" type="text" placeholder = "first">
        <input id="description-second-1" name="description-second-2" type="text" placeholder = "second">
            <select id="select-1">
                <option>
                        <option id="first-opt-1">1</option>
                        <option id="second-opt-1">2</option>
                </option>
            </select>
    </td>
</tr>
        <tr>
    <td>
        <input id="description-first-2" name="description-first-1" type="text" placeholder = "first">
        <input id="description-second-2" name="description-second-2" type="text" placeholder = "second">
            <select id="select-2">
                <option>
                        <option id="first-opt-2">1</option>
                        <option id="second-opt-2">2</option>
                </option>
            </select>
    </td>
</tr>

$(function() {
        $("#select-1").change(function() {
            if ($("#first-opt-1").is(":selected")) {
                $("#description-first-1").show();
                $("#description-second-1").hide();
            } else {
                $("#description-first-1").hide();
                $("#description-second-2").show();
            }
        }).trigger('change');
    });

http://jsfiddle.net/8vz121rq/9/

在我的示例中，您可以看到只有2行，但也可以是10行，具有不同的ID。

如果所有元素的id是动态的，如何让jquery标识要更改的行和其中的所有元素？

最佳答案

首先，由于行是动态生成的，因此需要事件委托，例如：

$("table").on("change", "[id^='select']", function() {
    // do your stuf
});

或您的情况：

$("table").on("change", "#select-1", function() {
    // do your stuf
});

那么，这是您所需要的吗？

$(function() {
    $("table").on("change", "[id^='select']", function() {
        var $this = $(this);
        var $row = $this.closest("tr");
        var ID = this.id.replace(/^[^\-]+\-(\d+)$/gi, '$1');
        var sIndex = $this.prop('selectedIndex');
        var part = sIndex === 2 ? "second" : "first";
        if (!sIndex) {
            $row.find("input").show();
            return;
        }

        $row.find("input").hide();
        $row.find("#description-" + part + "-" + ID).show();
    });
});

演示@ Fiddle

附言以上内容完全基于您的标记和ID结构！