probleme selection option

by LorenzoFR

HTML

<link rel="stylesheet" href="http://knacss.com/css/knacss.css">
<div class="txtcenter">
    <select id="select1">
        <option value="1" label="texte 1">texte 1</option>
        <option value="2" label="texte 2">texte 2</option>
        <option value="3" label="texte 3">texte 3</option>
        <option value="4" label="texte 4">texte 4</option>
        <option value="5" label="texte 5">texte 5</option>
    </select>
</div>

CSS

select {
    font-size: 150%;
    background-color: #ffffaa;
}

JavaScript

var nbOption = $('#select1>option').length;

function interval() {
    var idCourant = $('#select1>option[selected]').index();
    console.log('idCourant : ', idCourant);
    $('#select1>option[selected]').removeAttr('selected');
    
    idCourant += 1;
    if (idCourant >= nbOption) {
        idCourant = 0;
    }
    $('#select1>option:eq(' + idCourant + ')').attr('selected', 'selected');

    console.log(idCourant, ' == ', $('#select1 option[selected]').index());
    console.log('nb option selected : ', $('#select1 option[selected]').length);
    console.log('total option : ', $('#select1>option').length);
    console.log('-------------------------------');
}
var idInterval = setInterval(interval, 500);

$(window).on('keydown', function (ev) {
    if (ev.which === 27) {
        clearInterval(idInterval);
    }
});