如何使用jQuery在所有<options>中旋转<select>字段（仅Firefox）

Question

差不多完成了，但是我不知道为什么在完成第一个循环后，这段代码会停止工作（旋转选定的选项）。

这是我的代码：

的HTML

<div id="jsfiddle-container" class="form-group col-sm-12">
    <div class="input-group input-group-lg">
        <select name="medio" id="medio" class="form-control text-center" required>
            <option value="" selected>Forma de Pago</option>
            <option value="tc">Tarjeta de Crédito</option>
            <option value="cash">Efectivo</option>
            <option value="cheq">Cheque</option>
        </select>
        <span class="input-group-btn">
            <button id="btn-medio-plus" class="btn btn-info" type="button" tabindex="-1">Change
            </button>
        </span>
    </div>
</div>

Java脚本

$('#btn-medio-plus').click( function() {
     var actual = $('#medio option:selected');
     var actualIndex = actual.index();
     var nextIndex = ( actualIndex + 1 == $('#medio option').length ) ? 0 : actualIndex + 1;
     var next = $('#medio option').eq( nextIndex );

     actual.removeAttr('selected');
     next.attr('selected', true);
});

这是jsFiddle链接：http : //jsfiddle.net/swordf1zh/zue7ghcw/3/

我是Java的新手，所以我非常感谢您提供有关如何使代码正常工作以及为什么现在无法正常工作的解释。

提前致谢！

Answer 1

在我看来，这似乎是个FF错误。不过，您应该使用.prop("selected")而不是.attr("selected")更改element *的选定状态。

更新的演示

*这是用于操作的推荐方法的属性元素如的disabled，checked和selected。