如果选项被禁用，则多个下拉菜单会导致FIREFOX出现问题

Multiple Dropdowns causes issue on FIREFOX if options are disabled

本文关键字：FIREFOX 问题 下拉菜单 选项 如果      更新时间：2023-09-26

假设页面上有两个下拉菜单

    <div>1st dropdown</div>
    <select id="1" class="DROPDOWN">
     <option>1</option>
     <option>2</option>
    </select>
    <div>2nd dropdown</div>
    <select id="2" class="DROPDOWN">
     <option>3</option>
     <option>4</option>
    </select>
    <div id="aj" value=""></div>

现在我已经编写了一个javascript代码，当这些下拉列表中的任何一个发生更改时，该代码将禁用selected选项标记。

     $(document).on('change', '.DROPDOWN', function (event) {
       var value = $(this).val();
       $(this).find(":selected").attr('disabled','disabled');
       $("#aj").html(value);
     });

不幸的是，firefox中有一个典型的问题，其他浏览器都没有。

步骤1-从第一个下拉列表中选择第二个选项。完成后，div将立即填充值2。

步骤2-现在再次点击第一个下拉菜单，我可以看到第二个选项被禁用，只允许选择选项1。将鼠标悬停在第一个选项上，但不要单击它。现在，如果我单击页面外部的某个地方来折叠第一个SELECT标记，然后单击第二个下拉列表来展开它，则会触发第一个下拉列表的更改事件，div现在显示1而不是2。

之所以会发生这种情况，是因为firefox无法将焦点重新放在选项2上，因为它被禁用了，不幸的是，它在第一个下拉列表的最后一个悬停值上触发了一个更改。

任何可以建议的变通方法都会有所帮助。这是我的JSfiddle。请打开firefox中的小提琴查看问题。http://jsfiddle.net/achyut/ybu6ovs5/7/

此问题发生在Firefox 31 Linux版中。在将我的Firefox升级到36之后，这个问题得到了解决。看起来Firefox已经在两者之间解决了这个问题。

相关文章：