默认选择选项为空白

Question

我有一个很奇怪的要求，其中要求我默认在HTML的下拉菜单中没有选择任何选项。然而，我不能用这个<select>  <option></option>  <option>Option 1</option>  <option>Option 2</option>  <option>Option 3</option></select>因为，为此，我必须进行验证才能处理第一个选项。有人可以在没有将第一个选项实际包含在select标签中的情况下帮助我实现此目标吗？

Answer 1

也许这会有所帮助

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

Answer 2

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