我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
当前回答
如果一开始你不需要任何空选项,试试第一行:
<option style="display:none"></option>
其他回答
您可以使用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);
我使用Laravel 5框架和@Gambi的答案也适用于我,但对我的项目做了一些更改。
我在一个数据库表中有选项值,我用foreach语句使用它们。但在声明之前,我已经添加了一个选项与@Gambit建议设置,它工作。
以下是我的例子:
@isset($keys)
<select>
<option disabled selected value></option>
@foreach($keys as $key)
<option>{{$key->value)</option>
@endforeach
</select>
@endisset
我希望这也能帮助到某些人。再接再厉!
没有HTML解决方案。根据HTML 4.01规范,如果没有一个选项元素具有selected属性,那么浏览器的行为是未定义的,而浏览器在实践中所做的是使第一个选项预选。
作为一种变通方法,您可以用一组input type=radio元素(具有相同的name属性)替换select元素。这将创建一个具有不同外观和用户界面的同类控件。如果输入type=radio元素中没有一个具有checked属性,那么在大多数现代浏览器中,它们最初都不会被选中。
今天(2015-02-25)
这是有效的HTML5,并发送一个空白(不是空格)到服务器:
<option label=" "></option>
验证有效性http://validator.w3.org/check
Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)
下面的代码今天也通过了验证,但是从大多数浏览器(可能不需要)向服务器传递某种空格字符,在其他浏览器上传递一个空白(Chrome40/Linux传递一个空白):
<option> </option>
之前(2013-08-02)
根据我的笔记,在2013年,上面所示的选项标签内的非间断空格实体产生了以下错误:
错误:W3C Markup Validaton Service (Public):第一个子选项 属性的选择元素的 多个属性,其大小为1,必须为空 值属性,否则必须没有文本内容。
当时,一个普通的空格是有效的XHTML4,并从每个浏览器发送一个空白(不是空格)到服务器:
<option> </option>
未来
如果规范更新到明确允许空白选项,我会很高兴。最好使用最简洁的语法。以下任何一个都很好:
<option />
<option></option>
测试文件
<!DOCTYPE html > < html > < >头 <meta http-equiv=" content - type " content="text/html;utf - 8字符集= " / > <标题>测试< /名称> > < /头 <身体> <form action="index.html" method="post"> <选择name = "选取" > <option label=" "></option> . < /选择> > < /形式 < /身体> < / html >
这应该会有帮助:
https://www.w3schools.com/tags/att_select_required.asp
< >形式 需要<选择> <选项值= " " > < /选项>没有 沃尔沃<选项值=“沃尔沃”> < /选项> 萨博<选项值= "萨博" > < /选项> <选项值= "奔驰" >奔驰> < /选项 <选项值=“奥迪”>奥迪> < /选项 < /选择> <按钮类型=“提交”> > < /按钮提交 > < /形式