javascript - HTML <select> 元素发送默认选择，即使未选择

Question

我有一个通过 EJS 生成的下拉列表，它将默认的 selected 值设置为该公司当前的管理员值。

用户应该能够取消选择当前管理员并选择其他管理员，从而​​删除当前管理员作为公司管理员的身份。

但是，选择另一个选项和/或按住 CTRL 键并单击默认选项不会取消选择它，并且表单会发送默认选项和任何其他可能选择的选项。

我是否错过了 option 的 selected 属性的工作方式？

<div id="adminDropdown">
  <% if (companyAdmins) { %>
    <select name="chooseAdmins" id="chooseAdmins" form="updateCompany" multiple class="form-control">
      <% for (let location of currentCompany.locations ) { %>
        <% for (let contact of location.contacts) { %> 
          <option value="<%= contact.id %>" <%= contact.isCompanyAdmin ? 'selected' : '' %>><%= contact.firstName %> <%= contact.lastName %></option>
        <% } %>
      <% } %>
    </select>
    <span class="muted"><small>Hold `CTRL` to select multiple admins, or to deselect an admin.<br />
      To add users to this list, first add them to their Location's "Contacts".
    </small></span>
  <% } else { %>
    <div class="alert alert-warning">Error loading admins data</div>
  <% } %>
</div>

此外，检查 chrome 中的元素，“selected”属性在加载时正确显示，但在单击或 ctrl+单击选项后不会消失，就像它应该的那样。

Answer 1

我看到的问题是你没有关闭 select 内的第一个 for 循环

<% for (let location of currentCompany.locations ) { %>
    <% for (let contact of location.contacts) { %> 
        <option value="<%= contact.id %>" <%= contact.isCompanyAdmin ? 'selected' : '' %>><%= `${contact.firstName} ${contact.lastName}` %></option>
    <% } %>
<% } %>

顺便说一句，在我看来，在 ejs 中使用字符串文字只会降低代码的可读性。
你可以保持简单 <%= contact.firstName %> <%= contact.lastName %>