将动态创建的下拉列表的自定义属性值添加到另一个元素
将动态创建的下拉列表的自定义属性值添加到另一个元素
提问于 2015-12-15 00:21:05
我这里有一些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()以创建一个新的表行，并使用从数组传递的选项添加一个新的select。正如您从我的HTML标记中看到的那样，select输入放在td.get-resources中，一切都很正常。我设置了日期，填充了select字段，一切工作正常。我可以根据需要添加任意多行/选择下拉列表。
此外，每个选项都有几个自定义属性(您可以在上面的JS代码中看到)，我希望将这些属性的值添加到行的第二列和第三列(在HTML中是span.resources-unit和span.resources-quantity)。问题是，我不知道如何让它以1:1的比例工作，这意味着一个select下拉菜单只“改变”它自己行的单位和数量。下面是它的代码：
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++;
});发生的情况是，如果我添加了一个select输入，并更改了选项，它就能正常工作。当我添加另一个并更改其选项时，它将获得第一个的属性。添加更多-相同的东西。无论我做了什么更改，它都会采用添加的第一个项的属性值。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-15 00:31:49
尝试从元素中获取id，而不是从变量中获取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>基本上，您从更改的select开始，从那里您将获得被单击的选项节点。然后，您可以从该选项中获取所需的属性。然后，向上移动几个节点到行父节点，并找到该行中的两列。然后您可以设置这两列的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34271805
复制相关文章
相似问题