JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
    Select an option:
    <select id="test">
        <option value="0">zero</option>
        <option value="1">one</option>
        <option value="2">two</option>
    </select>
</h3>
<h3>Correct values will appear in <span>green.</span></h3>
<h3>Expected value: <span id="expected"></span></h3>
<p>$(this).prop('selectedIndex'): <span id="prop"></span></p>
<p>$(this).attr('selectedIndex'): <span id="attr"></span></p>
<p>$(this).selectedIndex: <span id="raw"></span></p>

CSS

* {
    font-family: Verdana;
}

p span.correct, span {
    color:green;
}
p span {
    color:red;
    font-weight:bold;
}

JavaScript

$('#test').on('change', function(a, b) {
    var values = {
        prop: $(this).prop('selectedIndex'),
        attr: $(this).attr('selectedIndex'),
        raw: $(this).selectedIndex,
        expected: $('option:selected').val()
    }, val, key;
    
    for (key in values) {
        val = values[key] + '';
        console.log([key, val]);    
        $('#' + key).html(val).toggleClass('correct', val === values.expected);
    }
}).trigger('change');