必須：最初の値を空にします-必須は空の値で機能します

前提条件：正しいhtml5DOCTYPEと名前付き入力フィールド

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

ドキュメントによると（リストと太字は私のものです）

必要な属性はブール属性です。
指定した場合、ユーザーはフォームを送信する前に値を選択する必要があります。

選択した要素の場合

• 必須の属性が指定されています。
• 複数の属性が指定されていません。
• 表示サイズは1です（SIZE = 2以上は使用しないでください。不要な場合は省略してください）。
• また、select要素のオプションリスト（存在する場合）の最初のオプション要素の値が空の文字列（つまり、として存在するvalue=""）である場合、
• そのオプション要素の親ノードはselect要素（optgroup要素ではない）であり、

その場合、そのオプションはselect要素のプレースホルダーラベルオプションです。

仕様に従って、要素は属性をサポート<select>します。required

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

これを尊重しないブラウザはどれですか？

（もちろん、ユーザーがJavaScriptを有効にすることを保証できないため、とにかくサーバーで検証する必要があります。）

はい、それは働いています：

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

最初のオプションを空白のままにしておく必要があります。

オプション要素の属性を使用してselected、デフォルトで選択肢を選択できます。select要素の属性を使用しrequiredて、ユーザーが確実に何かを選択できるようにすることができます。

Javascriptでは、プロパティをチェックしselectedIndexて選択したオプションのインデックスを取得するか、valueプロパティをチェックして選択したオプションの値を取得できます。

HTML5仕様によると、selectedIndex「最初に選択されたアイテムのインデックスを返します。選択されたアイテムがない場合は-1valueを返します。」は、最初に選択されたアイテムの値を返します。選択されたアイテムはありません。」したがって、selectedIndex = -1の場合、何も選択されていないことがわかります。

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

選択ボックスの最初の項目の値を空白にします。

したがって、フォームを投稿するたびに空白の値が得られ、この方法を使用すると、ユーザーがドロップダウンから何も選択していないことがわかります。

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

Works perfectly fine if the first option's value is null. Explanation : The HTML5 will read a null value on button submit. If not null (value attribute), the selected value is assumed not to be null hence the validation would have worked i.e by checking if there's been data in the option tag. Therefore it will not produce the validation method. However, i guess the other side becomes clear, if the value attribute is set to null ie (value = "" ), HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message. Thanks for asking. Happy to help. Glad to know if i did.

これを試して

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

JQueryを使用して動的に行うこともできます

セット必須

$("#select1").attr('required', 'required');

削除必須

$("#select1").removeAttr('required');