blocks|key|679823|text|是的，它起作用了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|679824|<select+name="somename"+required>
+++++<option+value="">Please+select</option>
+++++<option+value="one">One</option>
</select>|code-block|syntax|javascript|679825|您必须将第一个选项保留为空。|679826|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Yes, it's working:</p>

<pre><code>&lt;select name="somename" required&gt;
     &lt;option value=""&gt;Please select&lt;/option&gt;
     &lt;option value="one"&gt;One&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>you have to keep first option blank.</p>


blocks|key|679659|text|默认情况下，可以使用option元素的selected属性来选择一个选项。您可以使用select元素的required属性来确保用户选择某些内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|679660|在Javascript中，您可以检查selectedIndex属性以获取所选选项的索引，也可以检查value属性以获取所选选项的值。|679661|根据HTML5规范，selectedIndex“返回第一个选定项的索引，如果没有选定项，则返回−1。而value”返回第一个选定项的值，如果没有选定项，则返回空字符串。“因此，如果selectedIndex+=+-1，则您知道它们没有选择任何内容。|679662|<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>|code-block|syntax|javascript|679663|entityMap^0|J|8|1F|8|0|I|D|1D|5|0|A|D|1F|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$]]

<p>You can use the <code>selected</code> attribute for the option element to select a choice by default.  You can use the <code>required</code> attribute for the select element to ensure that the user selects something.  </p>

<p>In Javascript, you can check the <code>selectedIndex</code> property to get the index of the selected option, or you can check the <code>value</code> property to get the value of the selected option.</p>

<p>According to the HTML5 spec, <code>selectedIndex</code> "returns the index of the first selected item, if any, or −1 if there is no selected item.  And <code>value</code> "returns the value of the first selected item, if any, or the empty string if there is no selected item."  So if selectedIndex = -1, then you know they haven't selected anything.</p>

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


blocks|key|679715|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|679716|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;form action=""&gt;

&lt;select required&gt;

  &lt;option selected disabled value=""&gt;choose&lt;/option&gt;
  &lt;option value="red"&gt;red&lt;/option&gt;
  &lt;option value="yellow"&gt;yellow&lt;/option&gt;
  &lt;option value="green"&gt;green&lt;/option&gt;
  &lt;option value="grey"&gt;grey&lt;/option&gt;

&lt;/select&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;
</code></pre>


blocks|key|896698|text|首先，您必须在第一个选项中指定空值。例如，仅选择所需的here.than将起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896699|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>first you have to assign blank value in first option.
i.e. Select here.than only required will work.</p>


blocks|key|896657|text|将选择框的第一项的值设置为空。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896658|因此，当您每次发布表单时，您将获得空白值，并且使用这种方式，您将知道用户没有从下拉列表中选择任何内容。|896659|<select+name="user_role"+required>
++++<option+value="">-Select-</option>
++++<option+value="User">User</option>
++++<option+value="Admin">Admin</option>
</select>|code-block|syntax|javascript|896660|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Make the value of first item of selection box to blank. </p>

<p>So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.</p>

<pre><code>&lt;select name="user_role" required&gt;
    &lt;option value=""&gt;-Select-&lt;/option&gt;
    &lt;option value="User"&gt;User&lt;/option&gt;
    &lt;option value="Admin"&gt;Admin&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|896731|text|试试这个，这个会管用的，我试过了，这个管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896732|<!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>|code-block|syntax|javascript|896733|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this, this gonna work, I have tried this and this works.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;form action="#"&gt;
&lt;select required&gt;
  &lt;option value=""&gt;None&lt;/option&gt;
  &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
  &lt;option value="saab"&gt;Saab&lt;/option&gt;
  &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
  &lt;option value="audi"&gt;Audi&lt;/option&gt;
&lt;/select&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|896785|text|如果第一个选项的值为null，则可以正常工作。说明:+HTML5会在提交按钮时读到空值。如果不为null+(value属性)，则假定所选值不为null，因此验证将正常工作，即检查选项标记中是否有数据。因此，它不会产生验证方法。然而，我猜另一面变得清晰了，如果value属性设置为null，即(value+=+"“)，HTML5将在第一个或更确切地说是默认选择的选项上检测到空值，从而发出验证消息。谢谢你的关心。很乐意为您效劳。很高兴知道我有没有这么做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896786|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|896559|text|在html5中，您可以使用完整的表达式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896560|<select+required="required">|code-block|syntax|javascript|896561|我不知道为什么这个简短的表达式不起作用，但是试试这个。它会解决的。|896562|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In html5 you can do using the full expression:</p>

<pre><code>&lt;select required="required"&gt;
</code></pre>

<p>I don't know why the short expression doesn't work, but try this one.
It will solve.</p>


blocks|key|896478|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|896479|<select>
<option+value=""+style="display:none">Please+select</option>
<option+value="one">One</option>
</select>|code-block|syntax|javascript|896480|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this </p>

<pre><code>&lt;select&gt;
&lt;option value="" style="display:none"&gt;Please select&lt;/option&gt;
&lt;option value="one"&gt;One&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|679708|text|您还可以使用JQuery动态执行此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|679709|需要设置|679710|$("#select1").attr('required',+'required');|code-block|syntax|javascript|679711|需要删除|679712|$("#select1").removeAttr('required');|679713|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can do it also dynamically with JQuery</p>

<p>Set required</p>

<pre><code>$("#select1").attr('required', 'required');
</code></pre>

<p>Remove required</p>

<pre><code>$("#select1").removeAttr('required');
</code></pre>


<p>How can I check if a user has selected something from a <code>&lt;select&gt;</code> field in HTML5?</p>

<p>I see <code>&lt;select&gt;</code> doesn't support the new <code>required</code> attribute... do I have to use JavaScript then? Or is there something I’m missing? :/</p>


Can I apply the required attribute to <select> fields in HTML5?

HTML5

如何检查用户是否从HTML5的<select>字段中选择了某些内容？我发现<select>不支持新的required属性...那我一定要用JavaScript吗？还是我漏掉了什么？:/

问是否可以将必需的属性应用于HTML5中的<select>字段？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将必需的属性应用于HTML5中的<select>字段？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将必需的属性应用于HTML5中的<select>字段？
EN