从Dynamically Added Select访问数据属性

Question

到目前为止，我只看到了从页面上已经存在或几秒钟后添加的选择选项获取数据属性的示例。

我正在考虑单击一个按钮，添加3个以上的表单字段，其中一个可搜索的下拉字段中有一个数据标签，其中包含其他信息。也许我做这件事的方式不对。

这是选择上生成的选项

while ($row = mysqli_fetch_array($result))
{
$part = mysqli_real_escape_string($link, $row['part_number']);
$output .= "<option value=" .$row['id']. " data-sellprice=".$row['sell_price'].">" .$part. "</option>";
}

这是正在创建字段的Javscript

<script>
$(document).ready(function(){

$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';

html += '<td><select name="item_name[]" class="form-control fstdropdown-select item_name" id="swoparts"><option value="">Select Unit</option><?php echo fill_unit_select_box($db); ?></select></td>';
html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
html += '<td><input type="text" name="item_price[]" class="form-control item_price" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
setFstDropdown();
});

$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});

$("#swoparts").on("change", "select[name='item_name[]']", function(){
console.log(this.value);
})
});
</script>

我想从选项中获得数据sellprice，并将其显示在item_price[]文本字段中，并使用amount to不断添加到表单的其他金额中以获得总额。

我可以使数据属性在加载时已经在页面上的选择上工作。

编辑部分需要帮助！！！！！！

我已经走到了这一步，请解释一下我所做的以及为什么不起作用。我可以让这一切都适用于在页面创建或文档加载过程中创建的select。事后我无法完成这项工作。

<table class="table table-bordered" id="item_table">
<tr>
<th>Enter Item Name</th>
<th>Enter Quantity</th>
<th>Item Price</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
<tr>
<td>
<select id="swoparts" class="swoparts">
<option value="1" data-sellprice="55.00">Some thing we sell</option>
<option value="2" data-sellprice="100.00">Something else we sell</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"><td>
</tr>
</table>
$(document).ready(function(){
$('select.swoparts').change(function() {
var e = document.getElementById("swoparts");
var strUser = e.options[e.selectedIndex].value 
console.log(strUser);
});
$(document).on('click', '.add', function(){
$("#item_table").last().append('<td><select id="swoparts" class="swoparts"><option value="1" data-sellprice="55.00">Some thing we sell</option><option value="2" data-sellprice="100.00">Something else we sell</option></select></td><td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td><td><input type="text" name="item_price[]" class="form-control item_price" id="sell_price" /></td><td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');  
});

为什么我不能从动态生成的select中获取信息？

我想在我的表中添加3个框，其中有一个从数据库中填充的下拉列表，在那里我可以获取数据集属性并将其显示在其他地方，然后将其与其他添加的表行中的其他数据集属性一起添加。

Answer 1

我创建了一个小提琴：

• 添加选择框，该框具有data-*属性所在的选项
• 然后在更改这些选择框的值时，找到所选的选项
• 获取上面选项的数据-属性并添加它

https://jsfiddle.net/asutosh/k6jxmgs9/21/

下面的JS代码：

function addFields() {
const form1 = document.querySelector('#testform')
const selectField = document.createElement('select');
let dataView = null;
[1, 2, 3].forEach((aVal) => {
let optionElem = document.createElement('option');
optionElem.setAttribute("value", aVal);
optionElem.setAttribute("data-sellprice", "sell-" + aVal);
optionElem.text = aVal;
selectField.appendChild(optionElem);
})
selectField.addEventListener('change', () => {

form1.querySelectorAll('option').forEach((opt) => {
if (opt.value === selectField.value) {
dataView = opt.getAttribute("data-sellprice");
}
})
document.querySelector('#selectdData').innerHTML = dataView;
});
form1.appendChild(selectField);