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

我不能用这个,

<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?


当前回答

< td > < b >字段标签:< / b > < br > <选择风格= '对齐:左;' id='some_id' name='some_name'> .宽度:100% <option hidden selected>选择一个 <选项值=“Value1”> OptLabel1 > < /选项 <选项值= Value2的> OptLabel2 > < /选项 <选项值= ' Value3 ' > OptLabel3 < /选项> < /选择> 道明> < /

只需把“隐藏”选项你想隐藏下拉列表。

其他回答

只使用CSS的解决方案:

答:内联CSS

<选择> <选择风格= "显示:没有;" > < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

B: CSS样式表

如果你有一个CSS文件在手,你可以针对第一个选项使用:

选择。first-opt隐藏选项:first-of-type { 显示:没有; } <选择类= " first-opt-hidden " > <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

今天(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>&#160;</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 >

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

选择风格= "显示:没有"

平板电脑:iPad Pro / iOS 15 / Safari的糟糕解决方案 下拉菜单中出现了一个不必要的行,仅用于实际设备。不会在模拟器上重现。

我想一个好主意是使用单选按钮,设置#1为默认并隐藏它,给它一个例子 Name ="init"和一个值="null"或其他什么,由你决定!

这样单选按钮列表肯定有一个值,但默认为null可以在逻辑上使用!

我认为没有必要进一步阐述,因为这个想法可以很容易地通过显示来实现:没有;或者可见性:隐藏;

... 而我认为第一个显示:没有;是更好的选择: