我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
当前回答
我觉得这很有趣,因为不久以前我也经历过同样的事情。 然而,我在互联网上看到了一个关于这个解决方案的例子。
话不多说,请看下面的代码片段:
<select>
<option value data-isdefault="true">--Choose one Option--</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
这样,它将保持不可提交,但可以随时选择。用户界面更方便,用户体验更好。
好了,就这些了,希望能有所帮助。干杯!
其他回答
试试这个:
<select>
<option value="">
<option>Option 1
<option>Option 2
<option>Option 3
</select>
在HTML5中验证。在选择元素中使用所需属性。可以重新选择。适用于谷歌Chrome 45, Internet Explorer 11, Edge, Firefox 41。
今天(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 >
我明白你想做什么。最好和最成功的方法是:
<select name='department' required>
<option value="">None</option>
<option value="Teaching">Teaching department</option>
<option value="nonTeaching">Non-teaching department</option>
</select>
在react中,你可以用下面的选择标签给出一个虚拟值(比如-1),同样的值可以用你的这个禁用选项。(为我工作)
const nonEmpty = selected[identifierField] || false;
<select
onChange={(e) => {
onSelect(
options.find((option) => option[identifierField] === e.target.value)
);
}}
value={nonEmpty || -1}
>
<option disabled value={-1}>Select Option</option>
{options.map((option) => (
<option key={option[identifierField]} value={option[identifierField]}>
{option[displayField]}
</option>
))}
</select>
对于那些使用<select multiple> (combobox;没有下拉),这对我来说很管用:
<select size=1 disabled multiple> . <select size=1 disabled multiple> . <option hidden selected></option> 我<选项>选项> < /选项 < /选择>