Question

我有一个像这样的基本形式：

<form id="test-form">
<select id="multi" name="mymulti" multiple required>
    <option value="">Choose a different Option</option>
    <option>Foo</option>
    <option>Bar</option>
    <option>Baz</option>
    </select><br>
<select id="single" name="myselect" required>
    <option value="">Choose a different Option</option>
    <option>Foo</option>
    <option>Bar</option>
    <option>Baz</option>
    </select>    <br>
    <input type="submit">
</form>

这里的关键点是两个选项，required，但一个是multiple而另一个不是。

如果您选择默认选项（请注意您实际上必须单击它们），然后提交表单，它会告诉您单选是必需的，而不是多选。

我查看了html5 spec的相关部分，虽然有一些关于所需选择如何与占位符元素交互的讨论，但我没有看到任何关于多个+必需行为的内容。

以上行为仅适用于Chrome，其他浏览器似乎对两种类型的行为都相同。我的问题是，为什么？似乎......不一致。我理解如何使用一些JavaScript解决它，只是不是为什么我必须？任何人都可以解释这背后的理由吗？

Demo（记得实际选择占位符选项）。

Answer 1

Chrome就在这里。虽然FF中的实现只是简单的。但是chrome的实现不仅遵循规范，它也只是逻辑。如果多重或大小>使用了1个选择，根据定义没有占位符。没有选定的属性，确实没有：最初检查（即：选中）。

如果单个选择的大小= 1。选择＆gt; option：具有空值的first-child是占位符选项。单个选择总是有一个选项：选中/选中。

以下是JS中占位符选项的定义：https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L88-94此处为selectMissing for select的定义：https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L128-130

select vs multiple with required attribute表现不一致

1 个答案: