How to get alert of class name from selected option in select tag using jquery?

Question

I have a <select> tag with all options that are coming from the database. What I want to happen is when I select on a particular option, I want to get class name, but I am getting Undefined when I do it this way. Why is this happening?

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>

Answer 1

To get the class name of an element, use JavaScript's .className property.

Syntax:

object.className

Example:

console.log(document.querySelector("#element").className);

For multiple classes, use classList (only in newer versions):

// Gets fourth class
console.log(document.querySelector("#element").classList[3];

To emulate classList in older versions, use .split(/\\s+/)

// Gets fourth class
console.log(document.querySelector("#element").className.split(/\+s/)[3];

Source: How to get class of clicked element

Edit: @Andreas was right. The code you have already works and it dosen't need to be modified.

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>