JSFiddle - React, Tailwind, and code Playground

HTML

<select id="my_select">
    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
</select>
<br/>
<table border=1 cellpadding=5 cellspacing=0>
    <tr>
        <td width=100 align=center>Fail</td>
        <td width=100 align=center>OK</td>
    </tr>
    <tr>
        <td align=center>
            <a class="fail" href="#">1</a><br/>
            <a class="fail" href="#">2</a><br/>
            <a class="fail" href="#">3</a><br/>
        </td>
        <td align=center>
            <a class="ok" href="#">1</a><br/>
            <a class="ok" href="#">2</a><br/>
            <a class="ok" href="#">3</a><br/>
        </td>
    </tr>
</table>

JavaScript

/**********************************************/
/*      attr('selectedIndex') fail test       */
/* ------------------------------------------ */
/* Scenario is a beautiful CSS list binded    */
/* on an ugly select. Click on list elements  */
/* (1,2,3) to attempt to trigger the select   */
/* ------------------------------------------ */
/* .fail works with 1.5 but fails with 1.5+   */
/**********************************************/

$('.fail').click(function() {    
    /* This line fails */
    $('#my_select').attr('selectedIndex',parseInt($(this).html()) - 1);    
    $('#my_select').trigger('change');
    return false;
});

$('.ok').click(function() {    
    document.getElementById('my_select').selectedIndex = parseInt($(this).html()) - 1;    
    $('#my_select').trigger('change');
    return false;
});