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

Question

I have an dropdown that lists people available for a job. In each option there is a value and a data-id-proofinglevel. I would like to get the value of the data-id-proofinglevel for the selected person, but it's returning null.

Using MooTools and JavaScript, this is what I have:

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

The HTML is:

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

I should be getting the numbers, like 4, 2, and 0.

I tried getting the childNodes and looping through them, but can't access that specific property value. Any help would be much appreciated.

Answer 1

I think you've got a mistake at this line:

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

Try to change the JS code in your event callback to this one:

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>

That should work :)