为了账号安全,请及时绑定邮箱和手机立即绑定

默认选择选项为空白

/ 猿问

默认选择选项为空白

我有一个很奇怪的要求,其中要求我默认在HTML的下拉菜单中没有选择任何选项。然而,


我不能用这个


<select>

  <option></option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

因为,为此,我必须进行验证才能处理第一个选项。有人可以在没有将第一个选项实际包含在select标签中的情况下帮助我实现此目标吗?



查看完整描述

3 回答

?
翻翻过去那场雪

也许这会有所帮助


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


查看完整回答
反对 回复 2019-10-05
?
慕的地6264312

您可以使用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);


查看完整回答
反对 回复 2019-10-05
?
富国沪深

今天

这是有效的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(三星-Galaxy-S5)


下面的代码今天也通过了验证,但是从大多数浏览器的服务器(也可能不是)也传递了某种空格字符(在其他浏览器中传递了空格)(Chrome40 / Linux传递了一个空格):


<option>&#160;</option>

以前

根据我的注释,上面显示的选项标签内的非空格实体在2013年产生了以下错误:


错误:W3C标记有效期服务(公共):select元素的第一个子选项元素具有必需的属性,但没有multiple属性,其大小为1,必须具有空值属性,或者没有文本内容。


当时,常规空间是有效的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>


查看完整回答
反对 回复 2019-10-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信