Tengo una <select>etiqueta con todas las opciones que provienen de la base de datos. Lo que quiero que suceda es que cuando selecciono una opción en particular, quiero obtener el nombre de la clase, pero lo obtengo Undefinedcuando lo hago de esta manera. ¿Por qué está pasando esto?
HTML :
<select id="mySelect" class="form-control get-this">
<?php
foreach ($res as $r) {
?>
<option class="<?= $r->item_name ?>" ><?= $r->item_name ?></option>
<?php }
?>
</select>
JavaScript :
<script>
$('.get-this').on('change', function() {
var optionSelected = $("option:selected", this);
var valueSelected = $('option:selected').attr('class');
alert($(this).find('option:selected').attr("class"));
});
</script>
Para obtener el nombre de clase de un elemento, use la .classNamepropiedad de JavaScript .
Sintaxis:
object.className
Ejemplo:
console.log(document.querySelector("#element").className);
Para múltiples clases, use classList(solo en versiones más recientes):
// Gets fourth class
console.log(document.querySelector("#element").classList[3];
Para emular classListen versiones anteriores, use.split(/\s+/)
// Gets fourth class
console.log(document.querySelector("#element").className.split(/\+s/)[3];
Fuente: Cómo obtener la clase del elemento en el que se hizo clic
Editar: @Andreas tenía razón. El código que tiene ya funciona y no es necesario modificarlo.
console.log($("#element").attr("class"));
$("#js").text(document.querySelector("#element").className);
$("#jq").text($("#element").attr("class"));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element" class="my-class"></div>
<code>.className</code> returns: <span id="js"></span><br>
<code>.attr("class")</code> returns: <span id="jq"></span>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras