javascript - 下拉列表显示所有元素，但无法选择

Question

我有 JSP 页面和以编程方式填充的下拉列表。 现在，在某些情况下应该禁用下拉菜单，但用户应该仍然能够看到它的所有元素，但实际上无法选择它，如下所示: https://jsfiddle.net/nenadbulatovic/6g4pmmpv/1/

<select>
  <option value="Select...">Select...</option>
  <option disabled value="volvo">Volvo</option>
  <option disabled value="saab">Saab</option>
  <option disabled value="mercedes">Mercedes</option>
  <option disabled value="audi">Audi</option>
</select>

显然，由于有条件，我不能只禁用下一个选项。

这是我需要的代码的实际部分(下拉列表)。

<div class="row-fluid">
    <div class="span3">
      <label><%=Constants.REQUIRED%>&nbsp;<c:out value="${requestScope.RESOURCES_MAP.SITE_PARENT}"/>:</label>
        <select class="selectpicker" data-width="100px" id="siteParentNameSelect" style="width:250px;margin-bottom:0px;">
          <option value=''>${requestScope.RESOURCES_MAP[SELECT]}</option>
          <c:forEach var="siteParentName" items="${siteParentNameList}">
            <option value="${(pageContext.request, siteParentName.id)}" ${siteParentName.id == '0' ? 'selected = "selected" ' : ''}> ${siteParentName.name}</option>
          </c:forEach>
        </select>
    </div>
  </div>

我应该检查是否有像“enabledFlag”这样的条件，然后如果它是真/假，则启用/禁用其元素进行选择。

编辑:我只能使用 JSP/JSTL、JavaScript、JQuery

Answer 1

您应该使用 Angular ng-disabled 指令:

<select>
  <option value="Select...">Select...</option>
  <option ng-disabled=flag value="volvo">Volvo</option>
  <option ng-disabled=flag value="saab">Saab</option>
  <option ng-disabled=flag value="mercedes">Mercedes</option>
  <option ng-disabled=flag value="audi">Audi</option>
</select>

了解更多信息: https://www.w3schools.com/angular/ng_ng-disabled.asp

编辑:

不幸的是，我对 JSTL 不太熟悉，但是你不能做这样的事情吗？

<option value="mercedes" <c:if test="${flag}"><c:out value="disabled='disabled'"/></c:if>">