將動態創建的下拉列表的自定義屬性值添加到另一個元素

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.resources-units和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>

基本上，您從已更改的選擇開始，從那里獲得單擊的選項節點。 然后，您將從該選項中獲得所需的屬性。 然后，將幾個節點上移到行父級，找到該行內的兩列。 然后，您可以設置這兩列的內容。