当前位置： 文江博客话题详情

我可以将必需的属性应用于

发布于 2024-11-08 06:49:47 字数 162 浏览 3 评论 0原文

如何检查用户是否从 HTML 中的

我看到

原文

How can I check if a user has selected something from a <select> field in HTML?

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（13）

墨落成白 2024-11-15 06:49:47

强制：将第一个值设为空 - 要求对空值起作用

先决条件：正确的 html5 DOCTYPE 和命名输入

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

字段w3.org/html5/spec-author-view/the-select-element.html#the-select-element" rel="noreferrer">文档（列表和粗体是我的）

必需的属性是布尔值
属性。
当指定时，用户
将需要选择一个值
在提交表单之前。

如果选择元素

  • 指定了必需的属性，
  • 没有指定多个属性，
  • 并且显示尺寸为 1（SIZE 不等于 2 或更大 - 如果不需要则省略）；
  • 如果值
    中第一个选项元素的
    选择元素的选项列表（如果
    any) 是空字符串    （即呈现为 value=""），
  • 还有那个
    option 元素的父节点是
    选择元素（而不是 optgroup
    元素），

那么这个选项就是
选择元素的占位符标签
选项。

Mandatory: Have the first value empty - required works on empty values

Prerequisites: correct html5 DOCTYPE and a named input field

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

As per the documentation (the listing and bold is mine)

The required attribute is a boolean
attribute.
When specified, the user
will be required to select a value
before submitting the form.

If a select element

  • has a required attribute specified,
  • does not have a multiple attribute specified,
  • and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
  • and if the value
    of the first option element in the
    select element's list of options (if
    any) is the empty string     (i.e. present as value=""),
  • and that
    option element's parent node is the
    select element (and not an optgroup
    element),

then that option is the
select element's placeholder label
option.

回复 原文
孤者何惧 2024-11-15 06:49:47

根据规范，

哪个浏览器不支持这一点？

（当然，无论如何，您都必须在服务器上进行验证，因为您无法保证用户将启用 JavaScript。）

The <select> element does support the required attribute, as per the spec:

Which browser doesn’t honour this?

(Of course, you have to validate on the server anyway, as you can’t guarantee that users will have JavaScript enabled.)

回复 原文
白鸥掠海 2024-11-15 06:49:47

是的，它正在工作：

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

您必须将第一个选项保留为空。

Yes, it's working:

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

you have to keep first option blank.

回复 原文
橘虞初梦 2024-11-15 06:49:47

您可以使用选项元素的 selected 属性来默认选择一个选项。您可以使用 select 元素的 required 属性来确保用户选择某些内容。

在 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>

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

In Javascript, you can check the selectedIndex property to get the index of the selected option, or you can check the value property to get the value of the selected option.

According to the HTML5 spec, selectedIndex "returns the index of the first selected item, if any, or −1 if there is no selected item. And value "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.

<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>
回复 原文
楠木可依 2024-11-15 06:49:47

您需要将option的value属性设置为空字符串：

<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当用户在表单上按submit时，向服务器发送选项。空的值与空的文本输入相同 ->引发 required 消息。

w3school

value 属性指定提交表单时要发送到服务器的值。

示例

You need to set the value attribute of option to the empty string:

<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 will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input -> raising the required message.

w3schools

The value attribute specifies the value to be sent to a server when a form is submitted.

Example

回复 原文
情绪失控 2024-11-15 06:49:47
<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 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>
回复 原文
孤寂小茶 2024-11-15 06:49:47

试试这个，这会起作用，我已经尝试过了，这起作用了。

<!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>

try this, this gonna work, I have tried this and this works.

<!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>
回复 原文
佼人 2024-11-15 06:49:47

将选择框第一项的值设置为空白。

因此，当您每次发布表格时，您都会得到空白值，并且使用这种方式您会知道用户没有从下拉列表中选择任何内容。

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

Make the value of first item of selection box to blank.

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.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
回复 原文
情独悲 2024-11-15 06:49:47

首先，您必须在第一个选项中分配空白值。
即选择此处。仅需要即可工作。

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

回复 原文
我很OK 2024-11-15 06:49:47

如果第一个选项的值为空，则工作完全正常。说明 ：HTML5 将在按钮提交时读取空值。如果不为空（值属性），则假定所选值不为空，因此验证将起作用，即通过检查选项标记中是否有数据。因此它不会产生验证方法。然而，我想另一面会变得很清楚，如果 value 属性设置为 null 即 (value = "" )，HTML5 将在第一个或默认选择的选项上检测到空值，从而发出验证消息。谢谢你的询问。很高兴能帮助你。很高兴知道我是否做到了。

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.

回复 原文
煮茶煮酒煮时光 2024-11-15 06:49:47

在 html5 中，您可以使用完整表达式：

<select required="required">

我不知道为什么短表达式不起作用，但尝试一下这个。
它会解决。

In html5 you can do using the full expression:

<select required="required">

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

回复 原文
你的心境我的脸 2024-11-15 06:49:47

试试这个

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

Try this

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
回复 原文
时光匆匆的小流年 2024-11-15 06:49:47

您也可以使用 JQuery 动态执行此操作

Set required

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

Remove required

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

You can do it also dynamically with JQuery

Set required

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

Remove required

$("#select1").removeAttr('required');
回复 原文
~没有更多了~

关于作者

墨小沫ゞ

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文