Quiero obtener el valor de un atributo data-* de una selección creada dinámicamente en una tabla cuando cambio una opción. Recibo un "Error de referencia no detectado: el índice no está definido".
El HTML de creación es:
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>";La captura de cambio de opción es:
$('#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 });También he probado:
alert("this.attr('data-index'): " + $(this).attr("data-index")); //indefinido
Debe asegurarse de orientar el data-attribute correctamente, el valor de la opción se devuelve desde el selector principal ( select ), pero se debe acceder a la opción en sí de manera diferente. Utilice el conjunto de dataset para orientar los atributos de los datos.
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>