如何旋转<选择>字段的所有<选项>使用jQuery(仅限Firefox版本）

How to rotate a <select> field through all its <options> using jQuery (Firefox only issue)

本文关键字：lt gt 使用 选项 jQuery Firefox 版本 仅限 何旋转 选择 旋转      更新时间：2023-09-26

差不多完成了，但我不明白为什么这个代码在完成第一个周期后停止工作（旋转所选选项）。

这是我的代码：

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>

Javascript

$('#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/

我是Javascript的新手，所以我非常希望能解释一下如何使代码工作，以及为什么它现在没有按预期工作。

提前感谢！

这对我来说像是一个FF错误。不过，您应该使用.prop("selected")而不是.attr("selected")来更改元素*的选定状态。

更新的演示

*这是操作元素（如disabled、checked和selected）的属性的推荐方法。

这个怎么样？模运算符用于if语句，代码简化为：

$('#btn-medio-plus').click( function() {
    var opt_l = $( "#medio option" );
    var opt_s = $( "#medio option:selected" );
    var i = $( opt_s ).index() + 1;
    $( opt_l[ i % opt_l.length ] ).prop( "selected", true );   
});

这似乎适用于Firefox和Chrome。

修改的Fiddle

相关文章：