Question

假设我们在页面上有2个下拉列表

    <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代码，当任何这些下拉列表发生变化时，它会禁用所选的选项标记。

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

Answer 1

此问题发生在Firefox 31 for Linux中。将我的Firefox升级到36后，此问题得到了解决。看起来好像Firefox已经解决了这个问题。

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

1 个答案: