選擇VS多與所需的屬性表現不一致

我有一個基本形式，像這樣：選擇VS多與所需的屬性表現不一致

<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的相關部分，雖然有一些關於所需select與佔位符元素如何交互的討論，但我沒有看到任何有關多個+所需行爲的信息。

上述行爲僅在Chrome中出現，其他瀏覽器似乎對這兩種類型的行爲都是相同的。我的問題是，爲什麼？看起來......不一致。我知道如何解決它與一些JavaScript，而不是爲什麼我會不得不？任何人都可以解釋這背後的理由嗎？

Demo（記得要實際選擇佔位符選項）。

來源

2014-01-15 Ryley

哪些瀏覽器？火狐顯示我正確 –

如果你有多個選項，爲什麼你會有一個「選擇一個」 – Charles380

哦，男孩，是的...我實際上只檢查了Chrome，當我發佈這個問題，但我已經注意到它在6個月前在所有瀏覽器 – Ryley

Chrome在這裏行事。 FF中的實現僅僅是simpel。但是chrome的實現不僅遵循規範，它也是簡單的邏輯。如果使用多重或大小> 1選擇，則根據定義沒有佔位符。沒有選定的屬性，確實沒有什麼：最初檢查（即：選擇）。

在大小= 1的單個選擇的情況下。 select>選項：具有空值的第一個孩子是佔位符選項。一個選擇總是有一個選項：選中/選中。

這裏是JS的佔位符選項的定義：https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L88-94和這裏選擇一個valueMissing的定義：https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L128-130

來源

2014-01-15 18:24:16

我想也許我濫用「placeholder」這個詞我的觀點是，如果他們選擇一個空值的選項，無論選項元素的數量多少，所需的+ multi應該表現得與要求相同+單不應該呢？ – Ryley

不，因爲具有空值選項的select [multiple]沒有意義。這種類型的控件確實沒有選擇任何狀態。雖然單一尺寸的單選總是選擇一個選項。 –

啊哈！這很有道理，謝謝:) – Ryley

選擇VS多與所需的屬性表現不一致

回答

相關問題