Question

在Firefox 32中，我有一个<select>，其中第一个<option>同时为disabled和selected，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery sortable() error Firefox</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $(".sort").sortable({
          items: "> div"
        });
      });
    </script>
  </head>
  <body>
    <div class="sort">
      <div>
        <h1>Heading</h1>
        <select>
          <option selected="selected" disabled="disabled">Make a selection</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
      <div>
        <h1>Heading</h1>
        <select>
          <option selected="selected" disabled="disabled">Make a selection</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
    </div>
  </body>
</html>

如果我点击输入打开下拉列表并将鼠标悬停在其中一个有效选项上但不选择它然后单击关闭输入，首先显示灰色选项再次，但如果我拖动它上面的标题，指向的最后一个选项将被选中。这只发生在Firefox中，而不是Chrome或Google-Opera甚至IE中。在用户直接选择之前，如何将其保留为未在Firefox中选择？

修改

看起来这与jQuery无关并且可以排序，它们只是展示了Firefox的“幕后”行为。以下代码更简洁地显示了错误：

<!DOCTYPE html>
<html>
  <head>
    <title>Firefox select bug</title>
  </head>
  <body>
    <form method="get">
      <select name="test">
        <option value="0" selected="selected" disabled="disabled">Make a selection</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <input type="submit"/>
    </form>
  </body>
</html>

只需指向一个选项，但不要选择它，然后提交表单。您应该在地址末尾看到?test=[value]，[value]是您指向的最后一个选项。

Answer 1

这可能是Firefox中的错误或所需行为。据我所知，没有编程方式来区分Firefox的自动选择和有意的人工启动选择，即从JavaScript中自动选择看起来就像点击选择选项等。

当使用jQuery对输入进行排序时，Firefox会自动选择

修改

1 个答案: