HTML 元素发送默认值，即使未选择

Question

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

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

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

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

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

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