ユーザーが<select>HTML5のフィールドから何かを選択したかどうかを確認するにはどうすればよいですか？
私が見る<select>新しいサポートしていないrequired属性を...私は、JavaScriptを使用しなければなりませんの？それとも私が見逃しているものはありますか？：/
回答:
必須：最初の値を空にする-必須は空の値で機能します
前提条件：html5 DOCTYPEと名前付き入力フィールドを修正する
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>ドキュメントに従って（リストと太字は私のものです）
必須属性はブール属性です。
指定した場合、ユーザーはフォームを送信する前に値を選択する必要があります。選択要素の場合
- 必須属性が指定されている、
- 複数の属性が指定されていない、
- 表示サイズが1である（SIZE = 2以上がない-不要な場合は省略してください）;
- そして、select要素のオプションのリスト（存在する場合）の最初のoption要素の値が空の文字列（つまり
value=""、として存在する）である場合、- そして、そのoption要素の親ノードはselect要素です（optgroup要素ではありません）。
そのオプションは、要素のプレースホルダーラベルオプションを選択します。
<select>要素がサポートするrequired仕様に従って、属性を：
これを受け入れないブラウザはどれですか？
（もちろん、ユーザーがJavaScriptを有効にすることを保証できないため、とにかくサーバー上で検証する必要があります。）
selectedオプション要素の属性を使用して、デフォルトで選択肢を選択できます。requiredselect要素の属性を使用して、ユーザーが確実に何かを選択できるようにすることができます。
JavaScriptでは、selectedIndexプロパティをチェックして選択したオプションのインデックスを取得するか、valueプロパティをチェックして選択したオプションの値を取得できます。
HTML5仕様によれば、selectedIndex「最初に選択されたアイテムがある場合はそのインデックスを返します。選択されたアイテムがない場合は-1をvalue返します。そして、最初の選択されたアイテムがある場合はその値を返します。ある場合は空の文字列を返します。選択されたアイテムがありません。 "したがって、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>-1ます。申し訳ありませんが、最初はコメントで明確にしていませんでした。
<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>選択ボックスの最初の項目の値を空白にします。
したがって、FORMを投稿するたびに空白の値が取得され、この方法を使用すると、ユーザーがドロップダウンから何も選択していないことがわかります。
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>のvalue属性をoption空の文字列に設定する必要があります。
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>select戻りますvalue選択のoptionサーバーにするとき、ユーザーを押すsubmitのをform。空valueは空のtext入力と同じです-> requiredメッセージを発生させます。
value属性は、フォームが送信されたときにサーバーに送信される値を指定します。
これを試してみてください、これでうまくいきます。
<!DOCTYPE html>
<html>
<body>
<form action="#">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>最初のオプションの値がnullの場合、問題なく機能します。説明：HTML5は、ボタンの送信時にnull値を読み取ります。null（値属性）でない場合、選択された値はnullではないと見なされるため、オプションタグにデータが存在するかどうかを確認することにより、検証が機能します。したがって、検証メソッドは作成されません。ただし、値の属性がnullに設定されている場合（値= ""）、HTML5は最初の、またはデフォルトで選択されたオプションで空の値を検出するため、検証メッセージが表示されます。質問してくれてありがとう。お力になれて、嬉しいです。私がそうしたかどうか知ってうれしい。
これを試して
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>JQueryを使用して動的に行うこともできます
必要なセット
$("#select1").attr('required', 'required');削除してください
$("#select1").removeAttr('required');
selectedIndex。