我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
当前回答
这应该会有帮助:
https://www.w3schools.com/tags/att_select_required.asp
< >形式 需要<选择> <选项值= " " > < /选项>没有 沃尔沃<选项值=“沃尔沃”> < /选项> 萨博<选项值= "萨博" > < /选项> <选项值= "奔驰" >奔驰> < /选项 <选项值=“奥迪”>奥迪> < /选项 < /选择> <按钮类型=“提交”> > < /按钮提交 > < /形式
其他回答
这应该会有帮助:
https://www.w3schools.com/tags/att_select_required.asp
< >形式 需要<选择> <选项值= " " > < /选项>没有 沃尔沃<选项值=“沃尔沃”> < /选项> 萨博<选项值= "萨博" > < /选项> <选项值= "奔驰" >奔驰> < /选项 <选项值=“奥迪”>奥迪> < /选项 < /选择> <按钮类型=“提交”> > < /按钮提交 > < /形式
我只想说一句:
一些Safari浏览器似乎既不尊重“hidden”属性,也不尊重样式设置“display:none”(在MacOS 10.12.6下使用Safari 12.1测试)。没有显式的占位符文本,这些浏览器只是在选项列表中显示一个空的第一行。因此,为这个“虚拟”条目提供一些解释性文本可能是有用的:
<option hidden disabled selected value>(select an option)</option>
由于“disabled”属性,它无论如何都不会被主动选择。
您可以使用Javascript来实现这一点。试试下面的代码:
HTML
<select id="myDropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
JS
document.getElementById("myDropdown").selectedIndex = -1;
或JQuery
$("#myDropdown").prop("selectedIndex", -1);
没有HTML解决方案。根据HTML 4.01规范,如果没有一个选项元素具有selected属性,那么浏览器的行为是未定义的,而浏览器在实践中所做的是使第一个选项预选。
作为一种变通方法,您可以用一组input type=radio元素(具有相同的name属性)替换select元素。这将创建一个具有不同外观和用户界面的同类控件。如果输入type=radio元素中没有一个具有checked属性,那么在大多数现代浏览器中,它们最初都不会被选中。
我觉得这很有趣,因为不久以前我也经历过同样的事情。 然而,我在互联网上看到了一个关于这个解决方案的例子。
话不多说,请看下面的代码片段:
<select>
<option value data-isdefault="true">--Choose one Option--</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
这样,它将保持不可提交,但可以随时选择。用户界面更方便,用户体验更好。
好了,就这些了,希望能有所帮助。干杯!