如何获取option中data-id-proofinglevel的值

Question

我有一个下拉列表，其中列出了适合某项工作的人员。在每个选项中都有一个值和一个 data-id-proofinglevel。我想获取所选人员的 data-id-proofinglevel 值，但它返回 null。

使用 MooTools 和 JavaScript，这就是我所拥有的：

$(document.body).addEvent("change:relay(.connectedassignments)", function (e, el) {
    let rowid = el.get('data-row-id');
    let proofingLevel = document.getElementById('connected[' + rowid + ']').getAttribute('data-id-proofinglevel');
    console.log('Proofing Level: ' + proofingLevel);
});

HTML是：

<select id="connected[1]" name="assignment[1][connected][]" class="connectedassignments" data-row-id="1">
    <option value="">Please select...</option>
    <option value="627" data-id-proofinglevel="4">Abby</option>
    <option value="375" data-id-proofinglevel="2">Jennifer</option>
    <option value="308" data-id-proofinglevel="0">Aimee</option>
</select>

我应该得到数字，例如 4、2 和 0。

我尝试获取子节点并循环遍历它们，但无法访问特定的属性值。任何帮助将不胜感激。

Answer 1

我认为你在这一行有误：

let proofingLevel = document.getElementById('connected[' + rowid + ']').getAttribute('data-id-proofinglevel');

尝试将事件回调中的 JS 代码更改为以下代码：

var rowId = 1
var list = document.getElementById('connected[' + rowId + ']')
var proofingLevel = list.options[list.selectedIndex].getAttribute('data-id-proofinglevel')

console.log('Proofing level: ' + proofingLevel || 'Not selected')

<select id="connected[1]" name="assignment[1][connected][]" class="connectedassignments" data-row-id="1">
    <option value="">Please select...</option>
    <option value="627" data-id-proofinglevel="4">Abby</option>
    <option value="375" data-id-proofinglevel="2" selected>Jennifer</option>
    <option value="308" data-id-proofinglevel="0">Aimee</option>
</select>

应该行得通:)

如何获取option中data-id-proofinglevel的值

How to get the value of data-id-proofinglevel in option

javascript

mootools