下拉框默认是空白

最新推荐文章于 2023-07-06 18:47:48 发布

原创最新推荐文章于 2023-07-06 18:47:48 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍两种方法实现下拉框初始为空白但无法选择空白项的效果。第一种使用纯CSS，通过设置样式使第一个option不可见且不可选；第二种利用JS，在页面加载时将下拉框的selectedIndex设置为-1，达到相同目的。

如何让一个下拉框初始是空白的，但是点开下拉框选不了空白项。

第一种纯CSS方法

上面的option置于第一行即可。

第二种借助js

html代码：

js代码：

我用下面这行代码解决了我遇到的问题

<c:when test="${xiala eq '-' }"><option value="">-</option></c:when>

由于我的下拉选数据都是从数据库取出来的

<select id="input${input.id }" must="${input.isMust }" controlType="${input.controlType }" title="${input.title }" class="label_right_select"><c:forEach items="${fn:split(input.itemOption, '/')}" var="xiala">
<c:choose>
<c:when test="${empty input.data.value ? xiala eq input.defaultValue : xiala eq input.data.value }"><option value="${xiala }" selected="selected">${xiala }</option></c:when>
<c:when test="${xiala eq '-' }"><option value="">-</option></c:when>
<c:otherwise><option value="${xiala }">${xiala }</option></c:otherwise>
</c:choose>
</c:forEach></select>