I want to get the value of an data-* attribute from a dynamically created select in a table when I change an option. I am getting an "Uncaught ReferenceError: index is not defined".
The creating HTML is:
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
html += "<option name='parRatingOption' data-index='" + i + "' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";
The option change catch is:
$('#showPatientPARForm').on( 'change', 'select[name="parRating"]', function (e) {
e.preventDefault();
alert("this.value: " + this.value);//works
alert("this.data-index: " + this.data-index);//Uncaught ReferenceError: index is not defined
});
I have also tried:
alert("this.attr('data-index'): " + $(this).attr("data-index")); //undefined
You need to make sure to target the data-attribute correctly,
the value of the option gets returned from the parent selector (select), but the option itself needs to be accessed differently.
Use dataset to target data attributes.
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>