当我更改选项时,如何从表中动态创建的select中获取data-*属性的值

let paraArray = ['one','two','three'];
let parIdArray = ['idOne','idTwo','idThree'];
let parRatingArray = [1,2,3];

let html = '';
html += "<td><select name='parRating'>";
for (let i = 0; i < paraArray.length; i++) {
    html += "<option name='parRatingOption' data-index='" + i + "' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>";
}

html += "</select></td>";

$('#showPatientPARForm table').append(html);

$('#showPatientPARForm').on( 'change', 'select[name="parRating"]', function (e) {
    e.preventDefault();
   
    alert("this.value: " + this.value);//works
    
    // select the data attribute correctly:
    //alert(this.options[this.options.selectedIndex].dataset.index);
    alert(this.options.selectedIndex)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showPatientPARForm">
  <table></table>
</div>