我有一个非常奇怪的要求,其中我需要在HTML的下拉菜单中默认选择没有选项.然而,
我不能用这个,
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>因为,为此,我将不得不进行验证来处理第一个选项.任何人都可以帮助我实现这个目标而不包括第一个选项作为select标签的一部分吗？
Gam*_*bit 904
也许这会有所帮助
<select>
<option disabled selected value> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
-- select an option --将默认显示.但如果您选择一个选项,您将无法选择它.
您也可以通过添加空来隐藏它 option
<option style="display:none">
所以它不再出现在列表中了.
选项2
如果您不想编写CSS并期望上述解决方案的行为相同,只需使用:
<option hidden disabled selected value> -- select an option -- </option>
Mat*_*hie 107
您可以使用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);
Gle*_*son 35
这是有效的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年产生了以下错误:
错误:W3C标记Validaton服务(公共):具有必需属性且没有多属性且大小为1的select元素的第一个子选项元素必须具有空值属性,或者必须没有文本内容.
那时,常规空间是有效的XHTML4,并从每个浏览器向服务器发送一个空白(不是空格):
<option> </option>
如果规范更新为明确允许空白选项,那将使我的心情高兴.最好使用最简洁的语法.以下任何一种都很棒:
<option />
<option></option>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<form action="index.html" method="post">
<select name="sel">
<option label=" "></option>
</select>
</form>
</body>
</html>
小智 13
<td><b>Ação da atividade:</b><br>
<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
<option hidden selected>Selecione uma opção</option>
<option value='Instalação'>Instalação</option>
<option value='Solicitação'>Solicitação</option>
<option value='Retirada'>Retirada</option></select>
</td>只需将"隐藏"放在要隐藏在下拉列表中的选项上即可.
And*_*zek 10
只是一个小评论：
一些 Safari 浏览器似乎既不尊重“隐藏”属性，也不尊重样式设置“显示：无”（在 MacOS 10.12.6 下使用 Safari 12.1 进行测试）。如果没有明确的占位符文本，这些浏览器只会在选项列表中显示空的第一行。因此，始终为此“虚拟”条目提供一些解释性文本可能会很有用：
<option hidden disabled selected value>(select an option)</option>
由于“禁用”属性，无论如何都不会主动选择它。
这应该有帮助：
https://www.w3schools.com/tags/att_select_required.asp
<form>
<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>
<button type="submit">Submit</button>
</form>仅使用CSS工作的解决方案:
答:内联CSS
<select>
<option style="display:none;"></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>B:CSS样式表
如果您手头有CSS文件,则可以option使用以下方法定位第一个:
select.first-opt-hidden option:first-of-type {
display:none;
}<select class="first-opt-hidden">
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>