Javascript 将动态创建的下拉列表的自定义属性值添加到另一个元素

我这里有一些HTML：

<tr taskId="(#=obj.task.id#)" assigId="(#=obj.assig.id#)" class="assigEditRow" >
            <td><select name="resourceId" class="get-resources formElements"></select></td>
            <td><span class="resources-units"></span></td>
            <td><span class="resources-quantity"></span></td>
            <td><input type="text" placeholder="Required Q"></td>
            <td align="center"><span class="teamworkIcon delAssig" style="cursor: pointer">d</span></td>
</tr>

---

如果我添加一个select输入，并更改选项，事情就会发生。当我添加另一个并更改其选项时，它将获得第一个的属性。添加更多相同的内容。无论我做什么更改，它都会获取添加的第一个项目的属性值。

尝试从元素而不是从变量获取id，因为您总是使用计数器的id更新元素，而不是使用单击的行的id更新元素

嗯，柜台到底做什么？我看得越多，就越不明白。我所知道的是，通过使用idCounter引用正确的行，您没有选择正确的元素

你想做点什么

$(document).on('change', '.get-resources', function() {
    //var row = this;
    this.find(/* Some path to the second column */).att(/* some att to change */);
    this.find(/* Some path to the third column */).att(/* some att to change */);
});

您总是再次使用该行作为根，而不是查找某个id，因此只更新该行

本地人：

<table>
    <tr>
        <td>
            <select>
                <option data-text="resName1" data-resourceID="resID1" data-resourceUnit="resUnit1" data-resourceQuantity="resQuantity1">1</option>
                <option data-text="resName2" data-resourceID="resID2" data-resourceUnit="resUnit2" data-resourceQuantity="resQuantity2">2</option>
                <option data-text="resName3" data-resourceID="resID3" data-resourceUnit="resUnit3" data-resourceQuantity="resQuantity3">3</option>
            </select>
        </td>
        <td>
            <div class="column2"></div>
        </td>
        <td>
            <div class="column3"></div>
        </td>
    </tr>
</table>
<script>
document.addEventListener('change', function ( event ) {
    var select = event.target,
        option = select.options[select.selectedIndex],
        values = {
            'text' : option.getAttribute('data-text'),
            'resourceID' : option.getAttribute('data-resourceID'),
            'resourceUnit' : option.getAttribute('data-resourceUnit'),
            'resourceQuantity' : option.getAttribute('data-resourceQuantity')
        },
        row = select.parentNode.parentNode,/* depending on how deep the select is nested into the tr element */
        column2 = row.querySelector('.column2'),
        column3 = row.querySelector('.column3');
    column2.textContent = 'some string with the values you want';
    column3.textContent = 'some string with the other values you want';
});
</script>

---

基本上，您从更改的选择开始，从那里可以得到单击的选项节点。然后从该选项中获得所需的属性。然后向上移动几个节点到行父节点，并找到该行中的两列。然后你可以设置这两列的内容。

我已经编辑了很多，所以可能不再准确了。明白了；以下是idCounter所做的：我的想法是通过添加它们自己的id来更改这两个字段，但显然这并不顺利：/这很有效，但只有当您使用resourceID或其他内容作为您设置的id的一部分时。如果像第一次一样使用变量，则每次检测到更改时，该行都将获得一个新id，即使我们将同一行更改了两次。很高兴你让它工作了。我会发布一个本地解决方案，你可以把它改成jquery。谢谢@Giannis Tzagarakis；

$(document).on('change', '.get-resources', function() {
    //var row = this;
    this.find(/* Some path to the second column */).att(/* some att to change */);
    this.find(/* Some path to the third column */).att(/* some att to change */);
});

<table>
    <tr>
        <td>
            <select>
                <option data-text="resName1" data-resourceID="resID1" data-resourceUnit="resUnit1" data-resourceQuantity="resQuantity1">1</option>
                <option data-text="resName2" data-resourceID="resID2" data-resourceUnit="resUnit2" data-resourceQuantity="resQuantity2">2</option>
                <option data-text="resName3" data-resourceID="resID3" data-resourceUnit="resUnit3" data-resourceQuantity="resQuantity3">3</option>
            </select>
        </td>
        <td>
            <div class="column2"></div>
        </td>
        <td>
            <div class="column3"></div>
        </td>
    </tr>
</table>
<script>
document.addEventListener('change', function ( event ) {
    var select = event.target,
        option = select.options[select.selectedIndex],
        values = {
            'text' : option.getAttribute('data-text'),
            'resourceID' : option.getAttribute('data-resourceID'),
            'resourceUnit' : option.getAttribute('data-resourceUnit'),
            'resourceQuantity' : option.getAttribute('data-resourceQuantity')
        },
        row = select.parentNode.parentNode,/* depending on how deep the select is nested into the tr element */
        column2 = row.querySelector('.column2'),
        column3 = row.querySelector('.column3');
    column2.textContent = 'some string with the values you want';
    column3.textContent = 'some string with the other values you want';
});
</script>