Dinamik olarak oluşturulmuş açılır menü öğelerinin özel nitelik değerlerini başka bir öğeye ekleme

Question

Tüm gün boyunca yanıt aramaktaydım ve hala şans yok. Yani bu benim ilk soru (... gerçi, çaresizlikten) burada:

<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> 

Ve burada JS biraz:

'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); 
     }); 
    }; 

Ben burada HTML biraz var

Aslında burada neler oluyor: Verilerimi URL'den alıyorum (JSON dizisi), yeni bir tablo satırı oluşturmak ve diziden iletilen seçeneklerle yeni bir seçim eklemek için tıkla üzerine addResourceFunction() öğesini tıklayın. HTML işaretlememden göreceğiniz gibi, select input td.get-sources'a yerleştirilmiş ve tüm bunlar iyi çalışıyor. Randevu aldım, seçim alanını dolduruyorum ve her şey güzel. İstediğim kadar fazla satır/seçim açılır menüsü ekleyebilirim. Ayrıca, her seçeneğin birkaç özel özniteliği vardır (yukarıdaki JS kodumda görebilirsiniz) ve bu özniteliklerin değerlerini satırın ikinci ve üçüncü sütununa eklemek istiyorum (HTML'de bunlar span.resources birimleridir ve span.resources-miktar). Mesele şu ki, 1: 1 çalışmasını nasıl yapacağım hakkında hiçbir fikrim yok, bu da bir seçim açılır listesinin sadece kendi satırlarının birimlerini ve miktarını "değiştirdiği" anlamına geliyor.

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++; 
    }); 

ne olur Bir seçme girişi ekleyin ve seçenekleri değiştirmek durumunda, şey çalışmasıdır: Aşağıda bunun için kodudur. Bir tane daha eklediğimde ve seçeneklerini değiştirdiğimde, ilkinin niteliklerini alır. Daha fazla şey eklemek - aynı şey. Değiştirdiğim her şey, eklenen ilk öğenin özellik değerini alır.

Umarım burada çok karmaşık bir hale getirmedim ve herhangi bir SO kuralını çiğnediysem özür dilerim ... Bu, her şeyden önce, benim ilk sorumum :) Çok teşekkürler!

Answer 1

Kimliği, öğeyi, değişkenin yerine öğeden almayı deneyin; çünkü, öğeyi her zaman tıklatılan satırın kimliğine sahip öğenin yerine, sayacın kimliğiyle güncellediğinizden.

Hmm, sayaç tam olarak ne yapar? Daha çok baktığımda, daha az anladım. Bildiğim, doğru satırı referanslamak için idCounter'ı kullanarak doğru öğeleri seçmemenizdir.

Sen sadece o satır güncellemek böylece, bunun yerine belirli id ​​bulma, her zaman tekrar root olarak satır kullanın

$(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 */); 
}); 

gibi bir şey yapmak istiyorum. Yerli

:

<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> 

Temelde size tıklandığı seçeneği düğümü olsun oradan değiştirildiğini seçme ile başlar. Ardından, ihtiyacınız olan öznitelikleri bu seçenekten alırsınız. Ardından satır üst öğesine birkaç düğüm yukarı gidip o satırın içindeki iki sütunu bulursunuz. Daha sonra bu iki sütunun içeriğini ayarlayabilirsiniz.