Select框中间出现异常空白选项的问题排查与解决

你遇到的情况是：包含Pass、Fail、Hold、Re-open四个选项的select下拉框，在Fail与Hold之间出现了一个异常空白选项，而且这个问题从最初只有两个选项时就存在，新增选项后空白项固定出现在中间位置。

问题根源 #

查看你提供的PHP生成代码，核心错误出在Fail对应的option标签未正确闭合：

echo"<option value='Fail'>FAIL<option>";

这里的结束标签误写成了<option>而非</option>，浏览器解析时会把这个错误的标签识别为一个新的空白option，最终就产生了你看到的异常空白条目。

修正后的完整代码 #

把未闭合的标签修正后，代码如下：

<?php 
echo"<td><select id='res[]' name='res[]' form='test'>";
echo"<option disabled selected value>--Result--</option>";
echo"<option value='Pass'>PASS</option>";
echo"<option value='Fail'>FAIL</option>"; // 修复了闭合标签
echo"<option value='Hold'>HOLD</option>";
echo"<option value='Reopen'>RE-OPEN</option>";
echo"</select>";
echo "</td>"; 
?>

修复效果 #

修正后，下拉框会正常显示所有预期选项：--Result--、PASS、FAIL、HOLD、RE-OPEN，不会再出现异常空白选项，表单提交也能正常获取对应的值。

内容的提问来源于stack exchange，提问作者Surkaav S