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

Question

我这里有一些 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>

还有一些 JS:

'use strict';
    function addResourceFunction(){
      let ResourcesJSON = (json) => {
        let Resources = json;
        console.log(Resources);
          let contactsLength = json.length;
          let arrayCounter = -1;

          let resID;
          let resName;
          let resUnit;
          let resQuantity;
          let Option = $('<option />');
          let assignedID = $('tr.assigEditRow:last').attr("assigId");

          while(arrayCounter <= contactsLength) {
            arrayCounter++;

            resID       = Resources[arrayCounter].ID;
            resName     = Resources[arrayCounter].name;
            resUnit     = Resources[arrayCounter].unit;
            resQuantity = Resources[arrayCounter].quantity;

            $('.assigEditRow').last().find('select').append($('<option>', {
              value: resName.toString(),
              text: resName.toString(),
              resourceID: resID.toString(),
              resourceUnit: resUnit.toString(),
              resourceQuantity: resQuantity.toString()
            }));
          }
      }

      $.getJSON("MY JSON URL IS HERE", function(json) {
        ResourcesJSON(json);
      });
    };

那么这里实际发生了什么:我从 URL(JSON 数组)获取数据，单击时触发 addResourceFunction() 以创建新的表格行并添加一个新的选择，其中包含从数组传递的选项。正如您从我的 HTML 标记中看到的那样，选择输入被放置在 td.get-resources 中，并且一切正常。我设置了日期，填充了选择字段，一切正常。我可以根据需要添加任意数量的行/选择下拉菜单。

此外，每个选项都有一些自定义属性(您可以在我上面的 JS 代码中看到)，我想将这些属性的值添加到该行的第二列和第三列(在 HTML 中，它们是 span.资源单位和 span.resources-quantity)。问题是，我不知道如何让它以 1:1 的比例工作，这意味着一个选择下拉菜单“改变”它自己行的单位和数量。以下是相关代码:

let idCounter = 1;
    $(document).on('change', '.get-resources', function() {
      $('.assigEditRow').last().find('.resources-units').attr('id', 'units-' + idCounter);
      $('.assigEditRow').last().find('.resources-quantity').attr('id', 'quantity-' + idCounter);

      this.resourceUn = $( ".get-resources option:selected" ).attr( "resourceUnit" );
      this.resourceQuant = $( ".get-resources option:selected" ).attr( "resourceQuantity" );
      $('#units-' + idCounter).append(this.resourceUn);
      $('#quantity-' + idCounter).append(this.resourceQuant);
      idCounter++;
    });

发生的情况是，如果我添加一个选择输入并更改选项，事情就会发生。当我添加另一个并更改其选项时，它会获得第一个的属性。添加更多 - 同样的事情。无论我更改什么，它都会采用添加的第一个项目的属性值。

Answer 1

尝试从元素而不是变量中获取 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>

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